KindEditor之图片上传处理
ThinkPHP
0000-00-00 00:00:00
开始之前,不妨先来看看你是否遇到以下的问题,如果有,那么恭喜你,本篇文章就是专门为处理这些问题而生。如果没有,不妨也看看不同的思路如何处理!
- 编辑过程中已经成功上传的图片,因为需求改变又删除了,这时,已经上传到服务器的图片需要怎么处理呢?(该问题另一篇文章已经做了详细讲解,富文本编辑器之图片上传删除问题)
- 多图上传图片上传成功后,点击取消后。已经上传的图片如何删除?
- 多图上传图片上传成功后,选择全部清空,如何删除已经上传到服务器的图片?
- 多图上传图片上传成功后,选择取消,如何删除已经上传到服务器的图片?
如何?你是否有同样的问题呢?
问题1已经在另一篇中做了详细讲解,感兴趣的可以点击去查看!
问题2/3/4解决方案为需要对该插件做一些细微调整,调整后的KindEditor.js大家可以点击下方的下载进入百度云进行下载!
现在开始代码的处理!
经过调整的KindEditor.js,当你点击单图删除、关闭按钮,全部取消按钮,取消按钮时,会调用相应的js方法!
在页面中定义固定的方法,调用ajax删除服务器多余的图片。
前端页面Javascript方法定义:
//多图上传中删除单张图操作 function cbdelimgs(_this){ var Singleimg = []; Singleimg.push({error:0,url:$(_this).parent(".ke-photo").find("img").attr("src")}) //返回图片路径 var storeData = JSON.stringify(Singleimg); $.ajax({ type: "post", url: "", data : {datas:storeData}, success: function (htmltxt) { console.info(htmltxt); } }); } //多图上传 关闭窗口按钮 全部清空 取消操作 删除图 function clearAllimgs(msg){ var storeData = JSON.stringify(msg); $.ajax({ type: "post", url: "", data : {datas:storeData}, success: function (htmltxt) { console.info(htmltxt); } }); }传到后台的数据格式为:
[{error:0,url:""},{error:0,url:""},{error:0,url:""}]
这里的URL即为需要删除的图片路径!
百度云KindEditor.js下载 密码: 6d1i
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
881篇文章
2640人已阅读