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