dropzone

使用dropzone.js上传

1.先在网上下载好后，直接在页面引入

<script src="./path/to/dropzone.js"></script>

如果想要好看的样式，还得引入dropzone.css;

2.使用dropzone.js有两种方法

2.1 创建一个 class 属性中包含 dropzone 的form 表单元素 :

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

2.2 程序化方式创建 dropzones (甚至不在 form 元素上) 通过初始化一个 Dropzone 类对象

 var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

如果使用了JQuery

$("div#myId").dropzone({ url: "/file/post" });

3.配置

Dropzone.options.myAwesomeDropzone = {
  	paramName: "file", // The name that will be used to transfer the file
	maxFilesize: 2, // MB
	accept: function(file, done) {
    	if (file.name == "justinbieber.jpg") {
      		done("Naha, you don't.");
	    }
    	else { done(); }
	}
};

配置项：

选项	描述
url	必须被设置,当dropzone在 form 表单以外的元素上时[译者注:dropzone不一定要在form元素上，也可以在一个div上，这里的意思就是假如在一个div上时必须设置URL](或者form表单没有 action 属性). 你也可以提供一个被 files调用的函数 并且必须返回 url (从 v3.12.0开始)
method	默认"post" 如有必要也可以修改成 “put” . 你也可以提供一个被 files调用的函数 并且必须返回 method (since v3.12.0)
parallelUploads	有多少文件将上载到并行处理 (见 进行排队文件上传 部分获取更多信息)[译者注：本人在使用过程发现：当使用手动上传时，每次只能上传两个文件，这样需要多次点击才能实现所有上传，最后学习了一下 Enqueuing file uploads 里面的关于自动上传时的处理流程，设置了这里的参数时，才能一下子全部队列上传]
maxFilesize	以MB为单位[译者注：上传文件的大小限制]
filesizeBase	默认值为 1000. 这个选项将设置在计算文件大小时使用 1000 还是使用 1024作为基本单位. 1000 是正确的, 因为 1000 Bytes 等于 1 Kilobyte, 1024 Bytes 等于 1 Kibibyte. 如果你不在乎有效性，您可以更改这个选项为 1024 .
paramName	设置传输文件名称参数. 默认是 file. 注意: 如果你将配置项 uploadMultiple 设置为 true, 那么 Dropzone 将在paramName设置的name的后面追加 [].
uploadMultiple	是否 Dropzone 应该在一个请求中发送多个文件. 如果此设置为 true，然后fallbach 中 input 的元素将具有multiple属性. 此选项还会触发其他事件 (如 processingmultiple). 请参阅事件部分了解更多信息.
headers	要向服务器发送的其他头文件的对象. 例如: headers: { “My-Awesome-Header”: “header value” }
addRemoveLinks	在每个预览文件下面添加一个remove[删除]或者cancel取消上传文件的链接[译者注：这里的删除和取消只是从上传队列中取消了，并没有在服务器上删除]. dictCancelUpload, dictCancelUploadConfirmation 和 dictRemoveFile 这三个配置项用来自定义设置相应操作链接的显示文字.[本项设置时布尔值，true开启/false关闭]
previewsContainer	定义文件预览显示位置， 定义为 null 时， 将会消失在Dropzone 元素中. 可以设置成一个HTML元素或者一个CSS选择器. 这个元素的class中应该包含dropzone-previews 以便正确显示预览.
clickable	若果设置 true, dropzone 元素本身将可以点击, 如果设置 false dropzone没有地方可供点击. 否则你也可以通过一个HTML元素，一个CSS选择器（多个HTML元素）或者其他的数组.
createImageThumbnails
maxThumbnailFilesize	以MB为单位[译者注：也可以使用小数]. 当文件名[译者注:这问是filename，但是测试后发现应该是出错了这里应该是指文件大小]超出这里的设置, 将不会生成缩略图.
thumbnailWidth	默认 null, 设置缩略图的缩略比[译者注：设置width，配合下面的thumbnailHeight一起使用].
thumbnailHeight	就像 thumbnailWidth一样. 如果为空, 将不能重置尺寸.
maxFiles	如果不为 null ，这里设置 Dropzone 最多可以处理多少文件. 如果超过这个限制, maxfilesexceeded 事件将被调用. dropzone 将通过 class 为dz-max- files-reached 反馈一些信息给你.
resize	is the function that gets called to create the resize information. It gets the file as first parameter and must return an object with srcX, srcY, srcWidth and srcHeight and the same for trg*. Those values are going to be used by ctx.drawImage()
init	Dropzone初始化时调用的函数，你可以在这个方法中设置时间监听.
acceptedFiles	accept实现检查文件的 mime 类型或扩展名， 使用逗号分隔文件类型或者扩展名列表. 例如 Eg.: image/*,application/pdf,.psd. 如果 Dropzone 是 clickable[译者注：即配置项clickable是true], 本项将被用作 accept 的参数，就和在 隐藏的 file input 一样.
accept	使用一个 file 和一个done 函数 作为参数的函数. 如果不带参数调用 done 函数时，将处理该文件. 如果你显示一条错误信息，该文件将不会被上传. 如果文件太大或不匹配的 mime 类型，将不调用此函数.
autoProcessQueue	当设置 false 你必须自己像这样 myDropzone.processQueue() 的调用来上传队列中的上传文件. 请参阅下面有关处理队列的详细信息.
previewTemplate	是一个包含预览dropzone上传的每个文件的模板字符串. 更改它以满足您的需求，但请务必提供正确的所有元素. You can 在你的页面中包含 这样的HTML容器, 并且像这样设置: previewTemplate: document.querySelector(‘preview-template’).innerHTML.
forceFallback	默认 false. 如果设置true 将强制使用 fallback .这在测试你的服务器端实现和确保一切如你预期的一样正常工作在没有使用dropzone的情况下，防止你一些经验上的错误，同时可以给你展示fallbacks是怎样显示的 .
fallback	这是一个方法，当浏览器不支持的时候调用. 默认实现展示 fallback input 字段 和一段文本

若要翻译 dropzone，还可以提供这些选项：

dictDefaultMessage	获取显示之前的任何文件被删除的消息。这通常是由图像，但默认为"Drop files here to upload"所取代
dictFallbackMessage	如果浏览器不受支持，此文本将替换默认的消息。默认值为"Your browser does not support drag’n’drop file uploads."
dictFallbackText	这点文本将在 file input元素选择文件前显示 . 如果你自己提供了 fallback 元素, 或者本项设置成 null 这段文本将被忽略. 默认是 "Please use the fallback form below "
dictInvalidFileType	如果该文件与文件类型不匹配所示的错误消息.
dictFileTooBig	当显示该文件太大。{{filesize}} 和 {{maxFilesize}} 将被替换.
dictResponseError	如果服务器响应无效时的错误消息。{{statusCode}}将被替换的服务器状态代码
dictCancelUpload	如果addRemoveLinks为 true，这段文本用来设置取消上载链接的文本
dictCancelUploadConfirmation	如果addRemoveLinks为 true，这里设置的文本将用于确认取消上载时显示.
dictRemoveFile	如果addRemoveLinks为 true，这段文本用来设置删除文件显示文本.
dictMaxFilesExceeded	如果设置了maxFiles ，这里设置的文本将在文件超出maxfiles设置值时显示

4.事件

Dropzone.options.myAwesomeDropzone = {
	init: function() {
		this.on("addedfile", function(file) { alert("Added file."); });
	}
};

事件参数

参数	描述
drop	用户把文件放到dropzone上
dragstart	用户开始拖动文件到任何地方
dragend	拖动结束
dragenter	用户把一个文件拖放到dropzone上
dragover	用户拖动一个文件在dropzone上
dragleave	用户拖动一个文件 Dropzone 外面
addedfile	当文件被添加到上传列表
removedfile	任何时候都可以调用这个方法来从上传列表中删除文件. 如果你想从你的服务器上面删除这个文件就可以利用这个监听方法[译者注：一定要清楚，removefile并不会删除服务器上面的文件，你需要自己实现服务器删除代码] .
thumbnail	当已生成缩略图。接收 dataUrl 作为第二个参数.
error	出错时. 接受 errorMessage 作为第二个参数，并且如果错误是 XMLHttpRequest对象， 那就作为第三个参数.
processing	当一个文件获取处理 （因为不是所有的文件会立即得到处理的队列）。以前，此事件被称为 processingfile.
uploadprogress	Gets called periodically whenever the file upload progress changes.Gets the progress parameter as second parameter which is a percentage (0-100) and the bytesSent parameter as third which is the number of the bytes that have been sent to the server.When an upload finishes dropzone ensures that uploadprogress will be called with a percentage of 100 at least once.Warning: This function can potentially be called with the same progress multiple times.
sending	在每个文件被发送前调用. 得到 xhr 对象 和 formData 对象作为第二个和第三个参数, 所以你可以修改他们(add a CSRF token) 或者追加额外的数据.
success	文件已经成功上传，获得服务器返回信息作为第二个参数(这个时间又被称作finished)
complete	当上传完成，成功或者出现错误时调用.
canceled	当取消文件上传式调用
maxfilesreached	当文件的数量达到maxFiles限制时调用.
maxfilesexceeded	由于文件数量达到 maxFiles 限制数量被拒绝时调用.
processingmultiple	查看processing 描述.
sendingmultiple	查看 sending 描述.
successmultiple	查看 success 描述.
completemultiple	查看 complete 描述.
canceledmultiple	查看 canceled 描述.
totaluploadprogress	用 uploadProgress (0-100), totalBytes 和 totalBytesSent的总数调用. 此事件可以用于显示所有文件的总体上传进度.
reset	当列表中的所有文件都被删除，并且 dropzone 被重置为初始状态时调用.
queuecomplete	当上传队列中的所有文件上传完成时调用.

参考资料

• Dropzone.js中文文档