dropzoneJS使用心得

/**
 * 初始化Dropzone
 * */
function initDropzone(dropzone_id){
	Dropzone.autoDiscover = false;// 抑制Uncaught Error: Dropzone already attached.错误
	var allowedMaxFiles = {'P1' : 42, 'P2' : 10, 'P3' : 4, 'P4' : 9, 'P5' : 42};// 每个平台一次可传图片个数
	var allowedImgSizeObj = {'P1' : 30, '42' : 30, 'P3' : 5, 'P4' : 5, 'P5' : 5};
	var allowedVideoSizeObj = {'P1' : 4096, '42' : 4096, 'P3' : 512, 'P4' : 500, 'P5' : 10};
	// 文件上传
	var dropzone = new Dropzone('#' + dropzone_id,{
	    previewTemplate: document.querySelector('#preview-template').innerHTML,
        url: "/contributes/fileUpload",
        paramName: "file",
        addRemoveLinks: true,
        dictRemoveFile: '<div class="glyphicon glyphicon-trash" aria-hidden="true" style="color:#00a881;"></div>',
        dictCancelUpload: "<div class=\"glyphicon glyphicon-trash\" aria-hidden=\"true\" style=\"color:#00a881;\"></div>",
        dictMaxFilesExceeded: '最大' + allowedMaxFiles[aspSelected] + '枚の画像をアップロードできます。',
        autoProcessQueue:true,
        uploadMultiple:true,
        clickable:true,
        maxFiles: allowedMaxFiles[aspSelected],
        maxFilesize: 100, // MB
        parallelUploads: 1, // 同时上传多少张
        timeout: 300000,
        acceptedFiles: "image/*,.mp4,.MOV,.wmv",
        init: function() {
        	this.on("addedfile", function(file) {    
        		$('#' + dropzone_id).attr('style', 'padding: 0px;');
            	$('.dz-remove').html(escape2Html($('.dz-remove').html()));
            	if (this.options.maxFiles != null && this.getAcceptedFiles().length >= this.options.maxFiles) {
            		alert(this.options.dictMaxFilesExceeded);
    	         }
            });
        	this.on("removedfile", function(removedfile) {
        		//删除图片，将删除的图片名添加到imgDelArr或者将imgAddArr里的删除
        		var rmCd = $(removedfile.previewTemplate.children[1].children[0]).attr('FILE_CD');
        		if(imgAddArr.indexOf(rmCd) != (-1)){
        			imgAddArr.splice(imgAddArr.indexOf(rmCd), 1);
        		}else{
        			imgDelArr.push(rmCd);
        		}
            });
            this.on("success", function(data) {
            	//上传成功后的处理
            	var responseData = JSON.parse(data.xhr.response);}
            });
            this.on("error", function(file, message) {
                this.removeFile(file);
            });
            this.on("complete", function(file) {
            	$('.dz-remove').html(escape2Html($('.dz-remove').html()));
            });
            this.on("processing", function(file) {
            	$('.dz-remove').html(escape2Html($('.dz-remove').html()));
            });
            this.on("uploadprogress", function(progress,p2) {
            	$('.dz-remove').html(escape2Html($('.dz-remove').html()));
            });
            this.on("totaluploadprogress", function(p1, p2, p3) {
            	if ($('#' + dropzone_id + ' div.dz-preview').length > 0){
            		if (document.querySelector('#' + dropzone_id + ' .dz-upload')) {
                        document.querySelector('#' + dropzone_id + ' .dz-upload').style.width = p1 + "%";
            		}
            	}
            });
            this.on("sending", function(file) {
            	// 上传前检查文件大小 
            	var fileType = file.type;
            	var fileSize = file.size / (1024*1024);//byte to MB
            	var allowedImgSize = allowedImgSizeObj[aspSelected];
            	var allowedVedioSize = allowedVideoSizeObj[aspSelected];
            	if(fileType.indexOf("image") != (-1) && fileSize > allowedImgSize){//imsge
            		alert('画像サイズは' + allowedImgSize +'MB以内でアップロードしてください。');
            		this.removeFile(file);
            	}
            	if(fileType.indexOf("video") != (-1) && fileSize > allowedVedioSize){// vedio 
            		alert('動画サイズは' + allowedVedioSize +'MB以内でアップロードしてください。');
            		this.removeFile(file);
            	}
            });
            this.on("queuecomplete", function(progress) {
            	// 全部上传完毕之后的动作
            });
        }
    });
	return dropzone;
}

上传后，编辑时想把以上传的图片再展示的方法

for(var i = 0; i<attachFiles.length; i++){
  var mockFile = { name:  attachFiles[i].IMG_UUID, size: 12345}; 
  dropzoneObj.options.addedfile.call(dropzoneObj, mockFile);
  dropzoneObj.files.push(attachFiles[i].IMG_UUID);
  $($(mockFile)[0].previewElement).find('img').attr('src', attachFiles[i].IMG_PATH);
}