Dropzone应用

Dropzone应用

• 引入js css

<link href="css/plugins/dropzone/dropzone.css" rel="stylesheet">
<!-- DROPZONE -->
<script src="js/plugins/dropzone/dropzone.js"></script>

• 创建form表单

<form id="my-awesome-dropzone" class="dropzone" enctype="multipart/form-data" action="orders/imgUploads">
                                <div class="dropzone-previews"></div>
                            </form>
                            <div>
                                <div class="m text-left" id="upload"><small><font style="color:red">图片文件个数不得超过5个。</font></small> </div>
                            </div>

• 应用js

Dropzone.options.myAwesomeDropzone = { 
                        url: ctx+ "/orders/imgUploads", 
                        autoProcessQueue: false,
                        uploadMultiple: true,
                        paramName:"file",
                        maxFiles: 5,
                        addRemoveLinks: true,
                        parallelUploads:5,
                        dictRemoveFile: "删除文件",
                        dictDefaultMessage: "<center>单击或拖拽图片至此灰色区域</center>",
                        dictMaxFilesExceeded: "您不能在上传更多的图片了.",
                        acceptedFiles: ".jpg,.png,.jpeg,.gif,.bmp" ,

                        init: function() {
                            var myDropzone = this;
                            $(function () { $('#uploadModal').on('hidden.bs.modal', function () {
                                myDropzone.removeAllFiles(true);
                                 })
                             });
                            this.on("sendingmultiple", function() {
                            });
                            this.on("successmultiple", function(files, response) {
                            });
                            this.on("errormultiple", function(files, response) {
                            });
                            this.on("maxfilesexceeded", function(files) {
                                bootbox.alert("已超过最大图片数量限制！");
                                 myDropzone.removeFile(files);
                            });
                            myDropzone.on("sending", function(file, xhr, formData) {
//                              formData.romove("id");
                                formData.append("id", $('#orderUploadId').val());
                            });
//                            this.on("addedfile",function(files,response){
//                            });
                            this.on("success", function(file,message) {
                                if(0 == message.code){
                                    swal(message.message, "", "error");
                                    var modal = $('#uploadModal').modal('hide');
                                }else{
                                    swal("上传成功", "", "success");
                                    myDropzone.removeAllFiles(true);
                                    var modal = $('#uploadModal').modal('hide');
                                }
                                resetUploadTip();
//                              oTable.fnClearTable();
                            });
                            this.element.parentNode.parentNode.nextElementSibling.querySelector("button[type=submit]").addEventListener("click", function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                if(myDropzone.files.length == 0){
                                    bootbox.alert("文件不能为空");
                                }else{
                                    if($('#upload').css('display') == 'none'){
                                        bootbox.confirm({  
                                            buttons: {  
                                                confirm: {  
                                                    label: '确认上传',  
                                                    className: 'btn-primary'  
                                                },  
                                                cancel: {  
                                                    label: '取消上传',  
                                                    className: 'btn-default'  
                                                }  
                                            },  
                                            message: "请确认已添加所有所需凭证，上传将会覆盖原先的打款凭证", 
                                            callback: function(result) {  
                                                if(result) {  
                                                    myDropzone.processQueue();  
                                                } else {  
                                                }  
                                            },  
                                            title: "温馨提示：",
                                            });
                                    }else{
                                        bootbox.confirm({  
                                            buttons: {  
                                                confirm: {  
                                                    label: '确认上传',  
                                                    className: 'btn-primary'  
                                                },  
                                                cancel: {  
                                                    label: '取消上传',  
                                                    className: 'btn-default'  
                                                }  
                                            },  
                                            message: "请确认已添加所有所需凭证", 
                                            callback: function(result) {  
                                                if(result) {  
                                                    myDropzone.processQueue();  
                                                } else {  
                                                }  
                                            },  
                                            title: "温馨提示：",
                                            });
                                    }
                                }
                            });
                            this.element.parentNode.parentNode.nextElementSibling.querySelector("button[type=button]").addEventListener("click", function(e) {
//                                e.preventDefault();
//                                e.stopPropagation();
//                                myDropzone.processQueue();
                                myDropzone.removeAllFiles(true);
                                resetUploadTip();
                            });
                            this.element.parentNode.parentNode.parentNode.childNodes[1].childNodes[1].addEventListener("click", function(e) {
//                              e.preventDefault();
//                              e.stopPropagation();
//                              myDropzone.processQueue();
                              myDropzone.removeAllFiles(true);
                              resetUploadTip();
                            });
                        }
                }

以上代码应用完全没有问题，但是当已添加文件数量到达最大值时，再添加多个文件会多次调用maxfilesexceeded事件，导致会多次跳提示框，然后我就跑去看了Dropzone的源码，发现在上传文件的时候用了for语句，于是我就嘿嘿，改了它

源码

 return _this.hiddenFileInput.addEventListener("change", function() {
                                    var file, files, _i, _len;
                                    files = _this.hiddenFileInput.files;
                                    if (files.length) {
                                        //2015 12 15 yqb添加 开始
                                        var maxlength = files.length;
                                        if(files.length + _this.files.length > _this.options.maxFiles){
                                            if(_this.files.length < _this.options.maxFiles){
                                                maxlength = _this.options.maxFiles - _this.files.length + 1;
                                            }else{
                                                maxlength = 1;
                                            }
                                        }
                                        for (_i = 0, _len = maxlength; _i < _len; _i++) {
                                            file = files[_i];
                                            _this.addFile(file);
                                        }
                                        //2015 12 15 yqb添加 结束
                                        //之前代码 注释掉
                                        //注释开始
                                        //for (_i = 0, _len = files.length; _i < _len; _i++) {
                                        //    file = files[_i];
                                        //   _this.addFile(file);
                                        //}
                                        //注释结束
                                    }
                                    return setupHiddenFileInput();
                                });

Dropzone.prototype._addFilesFromItems = function(items) {
                    var entry, item, _i, _len, _results;
                    _results = [];
                    //2015 12 15 added by yqb
                    var maxlength = items.length;
                    if(items.length + this.files.length > this.options.maxFiles){
                        if(this.files.length < this.options.maxFiles){
                            maxlength = this.options.maxFiles - this.files.length + 1;
                        }else{
                            maxlength = 1;
                        }
                    }
                    //2015 12 15 modified by yqb
                    for (_i = 0, _len = maxlength; _i < _len; _i++) {
                    //for (_i = 0, _len = items.length; _i < _len; _i++) {
                        item = items[_i];
                        if ((item.webkitGetAsEntry != null) && (entry = item.webkitGetAsEntry())) {
                            if (entry.isFile) {
                                _results.push(this.addFile(item.getAsFile()));
                            } else if (entry.isDirectory) {
                                _results.push(this._addFilesFromDirectory(entry, entry.name));
                            } else {
                                _results.push(void 0);
                            }
                        } else if (item.getAsFile != null) {
                            if ((item.kind == null) || item.kind === "file") {
                                _results.push(this.addFile(item.getAsFile()));
                            } else {
                                _results.push(void 0);
                            }
                        } else {
                            _results.push(void 0);
                        }
                    }
                    return _results;
                };

最后改掉了多次提示的BUG