微客导航 » 文章资讯 » PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

2023-08-01 16:43:04 420

本文实例讲述了PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作。分享给大家供大家参考，具体如下：

2019-07-04更新

更新修改原因：

前台界面ui显示不好看
后台处理逻辑混乱，涉及到多张图片处理起来很麻烦，所以修改成通过ajax上传/删除图片。

效果：

上传前：

上传后：

撤销后：

以下是更新的代码：

HTML

代码：


缩略图		






上传图片
撤销图片

要点：重点都在注释里了。

参考：JS+HTML实现自定义上传图片按钮并显示图片

代码：

//上传图片
//对input[type=file]监听
$("input[name=pic]").on('change',function(){
vare=$(this);
varfile=e[0].files[0];
varformData=newFormData();
formData.append("pic",file);//这里给图片赋的name要与下面php中接收的post值对应
$.ajax({
url:"{:url('upimg')}",
type:'POST',
cache:false,//上传文件不需要缓存
data:formData,
processData:false,//告诉jQuery不要去处理发送的数据(规定通过请求发送的数据是否转换为查询字符串。默认是true。)
contentType:false,//告诉jQuery不要去设置Content-Type请求头(发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。)
success:function(data){
if(data){
$("#xian").hide();
$("#che").show();
$("#pic").val(data);
e.parents(".col-sm-6").append("[外链图片转存失败(img-wg119lWd-1562224226091)(https://mp.csdn.net/mdeditor/%22+data+%22)]");
layer.msg('上传成功',{icon:6})
}else{
layer.msg('上传失败',{icon:5})
}
}
})
})

//删除图片
functiondelimg(e){
layer.confirm('确定删除?',{icon:3,title:'提示'},function(index){
//dosomething
varid="{$article.id}";
varimgpath=$(e).siblings('img:last').attr('src');
$.ajax({
url:"{:url('delimg')}",
type:'post',
data:{pic:imgpath},
success:function(data){
if(data){
$("#xian").show();
$("#che").hide();
$("#pic").val("");
$(e).siblings('img').hide();
layer.msg('删除成功',{icon:6})
}else{
layer.msg('删除失败',{icon:5})
}
}
})
layer.close(index);
});

}

这里有句代码展示有问题，源码如下：

要点：
JSformDate的使用
上传成功后返回图片路径，塞到input[type=hidden]框里，之后会随着表单提交上去，保存在数据库中。

参考：JavaScript实现图片上传并预览并提交ajax

PHP

代码：

//ajax上传图片
publicfunctionupimg()
{
$file=request()->file('pic');//这里接收到的图片name要与上面js中formData赋值对应
if($file){
$info=$file->move(ROOT_PATH.'public'.DS.'uploads'.DS.'articleimg');
$imgpath='/uploads/articleimg/'.$info->getSaveName();
return$imgpath;
}else{
return0;
}
}

//ajax删除图片
publicfunctiondelimg()
{
$data=input('post.');
if($pic=$data['pic']){
$imppath=ROOT_PATH.'public'.$pic;
if(@unlink($imppath)){
//这里要对数据库中的Pic字段进行即时修改。嗯嗯
$re=db('article')->where('id',$data['id'])->setField('pic','');
if($re!==false){
return1;
}
}else{
return0;
}
}else{
return'参数错误';
}
}

分割线（下面是前几天写的答案，逻辑混乱。。。就不要看了吧）

前台处理：

添加一个，会随着post一起提交到后台中去。

后台处理分为两步

收到的post数据data中pic字段值为空时，且该栏目之前有图片，则执行删除原来图片操作；
如果上传了新图片，则移动到指定目录下，并查询该栏目之前是否有图片，如果有，则执行删除原来图片操作；
html代码


栏目图片



撤销图片
{notemptyname='$ca.pic'}
{else/}

{/notempty}

js代码

php代码

//1.如果栏目原来有图片&&现在撤销了，就删除旧图片
if(($cate['pic']!=false)&&($data['pic']==false)){
@unlink(ROOT_PATH.'public'.$cate['pic']);
}

//如果上传了新的图片
$file=request()->file('pic');
//移动到框架应用根目录/public/uploads/目录下
if($file){
$info=$file->move(ROOT_PATH.'public'.DS.'uploads'.DS.'cateimg');
if($info){
//成功上传后获取上传信息
$pic='/uploads/cateimg/'.$info->getSaveName();
$data['pic']=$pic;
//2.新的图片上传成功后，如果栏目原来有图片，删除原来栏目图片
if($cate['pic']){
@unlink(ROOT_PATH.'public'.$cate['pic']);
}
}else{
//上传失败获取错误信息
$this->error($file->getError());
}
}

更多关于PHP相关内容可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

热门推荐

随机推荐