富文本编辑器之图片上传删除问题

开始之前我们先来说说问题吧!

现如今的富文本图片上传问题大多数都是图片异步传输,也就是当你选择后,会马上将你的图片上传到服务器,再从服务器返回数据插入到你编辑的富文本中。这就导致了当你编辑过程中发现图片传错了或者发现写的根本不是你所想要的。你就会把编辑器中的图片给删除,可此时你删除的仅仅只是你编辑器中的图片,而之前被上传到服务器中的图片此时依旧稳稳的躺在服务器中。如果你说你空间大,不存在这些空间的占用,那肯定就不用管那些被作废了的图片。但如果你是一个严谨的或者不想要任何一张废弃的图片。这个时候就来看看我们是如何处理那些废弃的图片吧!

几乎所有的富文本编辑器,在上传完图片后,都会有一个专门的方法来接收上传成功返回的图片路径。而我们用到的也正是这个路径!

代码开始前,我先来给你大家说一下思路吧!


  1. 将每次图片上传成功后返回的路径存入一个数组
  2. 所有内容填写完整后将提前存入数组中的图片路径传入后台
  3. 正则匹配出你上传文章中所有的图片路径
  4. 将前台预存的图片路径和文章中通过正则匹配出的图片路径进行匹配筛选出那些不一致的图片路径,而这些不一致的正是我们在编辑过程中因为种种原因上传后又删除的图片路径

看到上面的思路,相信大家已经有了自己的看法了吧!接下来,我们就来看看相关代码是如何实现的吧!(注:相关代码本人只会给出关键代码,其余的需要诸位看官“仁者见仁智者见智”了!)

本次讲解以KindEditor富文本编辑器为例:

首先,定义一个全局数组用来存放所有图片路径。(注:只要上传到服务器返回的路径都会存入数组中。)

var newimgArray = [];//上传的所有图片进行处理
其次,把成功上传后返回的如路径存入数据。

KindEditor中有个回调方法,afterUpload(返回成功的路径);其余富文本编辑器插件的回调方法可以去查看对应的使用文档!

afterUpload : function(url) {
	newimgArray.push(url.replace("/static/uploads/",""));
 }
最后,提交后,将这个图片数组传递到后台,后台再讲富文本提交过来的文章进行正则匹配查询出文章中所有的图片路径。文章中的图片路径和提交的图片路径进行匹配,最后那些不匹配的路径即为在编辑过程中成功上传后又被删除的图片。

这里提供一个正则匹配文章筛选图片路径的PHP方法;

#正则筛选出所有图片
function getimgs($str) {
	$imgArray = array();
	$pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg]))[\'|\"].*?[\/]?>/"; 
	preg_match_all($pattern,$str,$match);
	for ($i=0; $i <count($match[1]) ; $i++) { 
		array_push($imgArray,substr($match[1][$i],16));
	}
	return $imgArray;
}
匹配出的路径将会存入数组,在PHP中对两个数组进行比对,便可以找出多图的图片,删除即可!

最后,感谢你能看完整篇文章,有不足之处,欢迎指点!

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!