您的位置:首页 > 其它

自用简易版图片上传回显功能

2018-01-11 12:03 211 查看
PHP代码:

public function upload(){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize   =     3145728 ;// 设置附件上传大小
$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
$info = $upload->upload();
if(!$info) {//上传失败
$this->error($upload->getError());
}else{// 上传成功
print_r(json_encode($info));
}
}
public function delete(){
$src = I('post.src');
unlink($src);
}

HTML代码:

<form action="__URL__/savepic" method="post" >
<input id="file" type="file" name="photo" />
<input id="pic" type="hidden" name="pic">
<button>提交</button>
</form>

JS代码:

$('#file').change(function(){
var $file = $(this);
var F = $file[0].files[0];
var formdata = new FormData();
formdata.append('pic',F);
$.ajax({
type:'post',
url:'/TEST/index.php/Home/Index/upload',
data: formdata,
processData : false,
contentType : false,
success:function(msg){
var data = eval('('+msg+')');
console.log(data.pic);
var pic = data.pic.savepath+data.pic.savename;//当前照片的名字
var src = './Uploads/'+pic;//完整地址
$('body').append('<img class="imgs" src="'+src+'" alt="">');
$('.imgs').bind('click',function(){
//点击删除相片
$(this).remove();
$.ajax({
type:'post',
url:'/TEST/index.php/Home/Index/delete',
data:'src='+$(this).attr('src'),
success:function(){
}
});
})
}
});
})

实现多图上传回显等功能,点击图片删除,PHP代码为thinkPHP图片上传功能
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: