dropzone使用教程及初始化图片

公司的项目要做一个电子商务系统, 其中用到了一个图上上传的功能,说实话,现在图片上传的插件还真不少,如:PluploadSWFUpload jQuery Pluginuploadify....,这样的插件google一下,一大堆。我们的项目中选择了 dropzonejs,因为这个插件支持拖拽和点击上传的,外观还不错。dropzonejs 的官网是:http://www.dropzonejs.com/, 中文手册是:http://wxb.github.io/dropzonejs.com.zh-CN/

我们在项目里,先把JS和CSS文件引进过去,

<link rel="stylesheet" href="dropzone.css" />
<script src="./path/to/dropzone.js"></script>

说明一下,把 dropzone.css 里的,所有的 .dropzone 修改成  .dropzoneimg, 因为我们下面的代码里用到的是 .dropzoneimg。然后再定义一个上传区域快

<div class="dropzoneimg"></div>

最后初始化我们的dropzone,就可以了

$("div.dropzoneimg").dropzone({
    url: "/Public/set_dropzone_image.html",//上传文件的地址,
    maxFiles: 2,//最多上传几个图片
    maxFilesize: 5,//图片的大小,单位是M
    addRemoveLinks:true,//是否有删除图片的功能
    dictRemoveFile:"",//删除图片的文字
    acceptedFiles: ".jpg,.jpeg,.png,.gif",//支持的格式
    paramName:'dropimage',//上传的FILE名称,即服务端可以通过此来获取上传的图片,如$_FILES['dropimage']
    init: function() {//初始化是的事件
        this.on("success", function(file) {
            console.log("File " + file.name + "uploaded");
        });
        this.on("removedfile", function(file) {
            console.log("File " + file.name + "removed");
        });
    }
});

这是可以添加更多的参数,具体参数可以通过官网和上面的中文手册地址去查看。初始化完,就可以正常上传图片了。如

1.jpg

特别说明一下,服务器端,如果是错误的情况,要返回非200的状态码,如服务端是PHP的情况下:

function my_json( $array, $state=200 )
{
	header("Content-type:application/json");
	header("HTTP/1.1 {$state} Not Found");
	exit( is_array($array) ? json_encode($array) : $array );
}
//这里处理上传过程
my_json('/Public/123.jpg');//上传成功
my_json('error', 404);//上传失败

但是,这是我们上传的时候,可以这样设置,如果我们想修改商品或修改文章的时候,我们是很希望把这些图片显示出来的,这样的话,我们就要用到 dropzone 初始化图片,查看了一下 dropzone.js 的源码,发现有两个函数,是可以做到的 addedfile和thumbnail, 我们把上面的初始化方法重新写一下,如下:

var mydropzone = new dropzone("div.dropzoneimg", {
	url: "/Public/set_dropzone_image.html",//上传文件的地址,
    maxFiles: 2,//最多上传几个图片
    maxFilesize: 5,//图片的大小,单位是M
    addRemoveLinks:true,//是否有删除图片的功能
    dictRemoveFile:"",//删除图片的文字
    acceptedFiles: ".jpg,.jpeg,.png,.gif",//支持的格式
    paramName:'dropimage',//上传的FILE名称,即服务端可以通过此来获取上传的图片,如$_FILES['dropimage']
    init: function() {//初始化是的事件
        this.on("success", function(file) {
            console.log("File " + file.name + "uploaded");
        });
        this.on("removedfile", function(file) {
            console.log("File " + file.name + "removed");
        });
    }
})
var mockFile = { name: "123.jpg", accepted:true };
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, "/Public/images/123.jpg");
myDropzone.emit("complete", mockFile);
myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1;

这样的话,我们就把 123.jpg 初始化显示出来了,但是,如果我们有10个默认的图片要初始化,就要再用一个FOR循环,感觉初始化代码变的特别多,所以,就整理成了一个函数。在 dropzone.js 的 390行左右即 complete: 函数下面,添加如下代码:

initimage: function(info) {
    if( info=='' || !info ) return false;
    var info_array = info.split(",");
    for( var i in info_array )
    {
        var hidefileval_str = info_array[i];
        var hidefileval_arr = hidefileval_str.split("/");
        var mockfile_object = { name: hidefileval_arr[hidefileval_arr.length-1], accepted:true }
        this.emit('addedfile', mockfile_object);
        this.emit('thumbnail', mockfile_object, hidefileval_str);
        this.emit('success', mockfile_object);
        this.emit('processing', mockfile_object);
        this.emit('complete', mockfile_object);
        this.files.push( mockfile_object );
        mockfile_object = null;
    }
},

如:下图

2.jpg

再找到下面这行代码,把  initimage 添加进去,

Dropzone.prototype.events = ["drop", "dragstart", "dragend", "dragenter", "dragover", "dragleave", "addedfile", "addedfiles", "removedfile", "thumbnail", "error", "errormultiple", "processing", "processingmultiple", "uploadprogress", "totaluploadprogress", "sending", "sendingmultiple", "success", "successmultiple", "canceled", "canceledmultiple", "complete", "completemultiple", "reset", "maxfilesexceeded", "maxfilesreached", "queuecomplete"];

修改成 

Dropzone.prototype.events = ["drop", "initimage", "dragstart", "dragend", "dragenter", "dragover", "dragleave", "addedfile", "addedfiles", "removedfile", "thumbnail", "error", "errormultiple", "processing", "processingmultiple", "uploadprogress", "totaluploadprogress", "sending", "sendingmultiple", "success", "successmultiple", "canceled", "canceledmultiple", "complete", "completemultiple", "reset", "maxfilesexceeded", "maxfilesreached", "queuecomplete"];

最后修改一下初始化方法,

$("div.dropzoneimg").dropzone({
    url: "/Public/set_dropzone_image.html",
    maxFiles: 2,
    maxFilesize: 5,
    addRemoveLinks:true,
    dictRemoveFile:"",
    acceptedFiles: ".jpg,.jpeg,.png,.gif",
    paramName:'dropimage',
    init: function() {
        this.emit("initimage", "/Public/2016-06-29/57733203f0bb4.png,/Public/2016-06-29/57733203f0bb4.png"); //初始化图片
        this.on("success", function(file) {
            console.log("File " + file.name + "uploaded");
        });
        this.on("removedfile", function(file) {
            console.log("File " + file.name + "removed");
        });
    }
});

如果不出什么意外的情况下,默认就会出初始化两个图片,这里只是记录一下自己的修改过程,说明一下,如果不是特别的情况下,不建议修改第三方插件源码,因为以后升级的时候,不方便。如果有什么错的或不明白的,欢迎大家留言讨论!

未经允许不得转载:易读小屋  »  dropzone使用教程及初始化图片