Dropzone做上传文件编辑功能

Dropzone做编辑功能

这篇文章主要用来介绍 用Dropzone做上传文件的编辑功能。
“批量上传”基本是一个涉及到文档、图片之类的项目的必有功能了，现在很多插件都能轻松的去实现。我呢用的就是这一Dropzone

Dropzone的基本用法网上一搜一大堆，这里就不哔哩哔哩了：-）

但是对于系统来说，基本都是有添加就有编辑，文档上传也不可避免。
下面进入正文：如何用Dropzone做 编辑 功能
编辑功能说白了就是将已上传的文件填充到Dropzone区域中以Dropzone基本元素的形式显示出来，如图：

下面上代码

var myDropzone = Dropzone.forElement('#myDropzone');//获取Dropzone元素节点
var mockFile = { //初始化需要填充的元素
                size: 12345,//元素大小
                name: images[x],//元素名称
                type: '.jpg,.png,.bmp,.jpeg'//元素类型
            };
            myDropzone.addFile(mockFile);//添加mock元素到显示区域
            myDropzone.options.thumbnail(mockFile, imgPath + images[x]);//给mock元素添加数据源
            myDropzone.options.success(mockFile);//给mock元素绘制上传成功标识

至此，从服务器端获取的已上传的文件元素就展示在了Dropzone区域中
如图：

（图挂了~~但是不要在意这些细节！- !）

还没完

虽然图片填充到了Dropzone区域中，但你真的在向服务器提交数据的时候会发现一个有趣的事情！

myDropzone.getAcceptedFiles().length  长度判断时，其length等于当前Dropzone区域所存在
元素的个数（不管你是否新增了元素或者删除了元素）

但是

 1. 你在编辑时没有新增新的上传文件（编辑时没有操作Dropzone区域或者只是删除了画布上的元素）
 
 你在上传文件时会发现一个文件都没有上传到服务器，虽然Dropzone区域中存在可见的几个元素
 
 2.你在编辑时新增了新的上传文件（编辑时不管是否删除了Dropzone画布上的元素）
 
 你在上传文件时会发现Dropzone只为你上传了那个你新增加的文件，而其数量却等于Dropzone区域中
 		可见的元素总数（已有+新增）

SO
我的做法是
你需要在this.on("removedfile", function (file) {//删除Dropzone画布中的元素}中执行删除服务器文件的操作，这样：在你删除了Dropzone区域中元素时，服务器的文件也会变更，而且你新增文件时新增的记录也会添加到服务器中，从而达到编辑作用

（MD，说的都是啥啥啥麽，啥都看不懂）
哈哈哈哈，看不懂就对了，我也不知道我在写啥，告辞！！！

删除服务器文件代码一搜一大堆，这里就不哔哩哔哩了：-）