注意! 该文件上传演示可能会返回一个错误,一旦后台服务正确配置,即可知道是什么原因造成该错误。
注意! 该文件上传演示可能会返回一个错误,一旦后台服务正确配置,即可知道是什么原因造成该错误。
这很可能是由Dropzone的自动检测功能引起的。
当Dropzone启动时,会扫描整个文档,并查找带有dropzone
样式的元素,然后为每个找到的元素创建一个Dropzone实例,如果你在之后手动创建一个同样的Dropzone实例,那么会出现上面的错误提示。
您可以按照如下方式编辑:
Dropzone.autoDiscover = false;
, 或则
Dropzone.options.myAwesomeDropzone = false;
在大多是情况下,并非一定要在程序中创建一个Dropzone实例,一个很好的建议是, 保持autoDiscover可用状态,并在初始配置选择项中配置Dropzone。
在Dropzone的配置选项中,有个maxFileSize
的配置参数,默认值为256
(MB) 。
如果所上传的文件大小大于该值,请调整该参数为合适的值。
然而,大部分文件存储服务器都会限制文件的大小,请检查您上传的文件是否是合适的大小。
目前,还没有一个单独的事件处理该功能,不过,您可以监听文件上传是否完成,每个文件上传完成后都激活该监听事件, 然后查看在文件上传处理器中是否还有未处理的文件。
在Dropzone的选项中,有个maxThumbnailFilesize
选项,默认值为 10
(MB),
该选项用于阻止浏览器下载太大的图片,以免浏览器打开过慢,您可以调整该选项的大小。
目前,还没有一个单独的事件处理该功能,不过,您可以监听文件上传是否完成,每个文件上传完成后都激活该监听事件, 然后查看在文件上传处理器中是否还有未处理的文件。
Dropzone.options.myDrop = { init: function() { this.on("complete", function() { if (this.filesQueue.length == 0 && this.filesProcessing.length == 0) { // 文件上传完成,上传队列中没人任何未上传的文件。 } }); } };
通常你需要在服务器上做一些验证工作,以查看文件是否是真实可靠的。 如果你希望Dropzone显示任何遇到的错误信息,你所需要做的就是将可能的值在400 - 500范围内的的HTTP状态码发回服务器。
Dropzone将会确定所上传的文件是无效的,之后会显示相应的错误信息。
在大多数的框架中,这些错误代码是自动生成的,然后你将这些错误代码发送到客户。
比如,在PHP,你可以在header
指令中设置它们。
从版本version 3.5.0开始,有个选项可以做到这点: addRemoveLinks
。
只要添加一个<a class="dz-remove">Remove file</a>
元素到将要删除的文件预览中,
将会变为 取消上传,如果当前文件正在上传,随后会出现一个确认对话框。
你可以配合这些选项一起使用:dictRemoveFile
, dictCancelUpload
和 dictCancelUploadConfirmation
。
如果你希望自己创建按钮,你可以参照以下的方式:
<form action="/target-url" id="my-dropzone" class="dropzone"></form> <script> // myDropzone是一个带有id属性的元素配置项 // 该id的值为my-dropzone (或 myDropzone) Dropzone.options.myDropzone = { init: function() { this.on("addedfile", function(file) { // 创建一个删除按钮 var removeButton = Dropzone.createElement("<button>删除文件</button>"); // 定义一个Dropzone实例变量 var _this = this; // 监听click事件 removeButton.addEventListener("click", function(e) { // 确认点击该按钮并非是提交表单: e.preventDefault(); e.stopPropagation(); // 删除文件预览 _this.removeFile(file); // 如果你想删除服务器上的文件, // 你可以在这里发起AJAX请求 }); // 添加文件预览事件按钮 file.previewElement.appendChild(removeButton); }); } }; </script>
如果你的Dropzone元素是<form>
,那么所有的隐藏输入域,将会随文件上传,自动以POST的方式提交。
示例:
<form action="/" class="dropzone"> <input type="hidden" name="additionaldata" value="1" /> <!-- 如果你想控制回退表单,只要在这里添加: --> <div class="fallback"> <!-- 这里的div元素将会被移除,如果回退并不是必要的 --> <input type="file" name="youfilename" /> etc... </div> </form>
想要获取从服务器传回的信息,请使用事件success
,参照以下方式:
Dropzone.options.myDropzone = { init: function() { this.on("success", function(file, responseText) { // 在这里处理返回的文本,比如,添加文本信息到预览事件中: file.previewTemplate.appendChild(document.createTextNode(responseText)); }); } };
虽然当前没有可用的方法函数做到这点,但你可以使用Dropzone的默认事件处理器做到到这点。
意思是这样的,创建一个mock文件,然后调用事件处理器addedfile
和thumbnail
,以显示出一个文件预览。
// 创建mock表单: var mockFile = { name: "Filename", size: 12345 }; // 调用默认addedfile事件处理器 myDropzone.emit("addedfile", mockFile); // 增加显示文件缩略图的选项: myDropzone.emit("thumbnail", mockFile, "/image/url"); // 如果你使用了maxFiles选项, 请确定你已经调整该参数值 // 到合理的数值: var existingFileCount = 1; // 已经上传完成的文件数量 myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
配置项
实现
如果你并不特别喜欢使用Dropzone默认的让用户确认是想要取消还是删除文件,而喜欢使用一些其他的方式做到这点(比如:引导的方式),
那么也很简单,你只要覆盖Dropzone.confirm
方法便可以。
// 在用户返回的时候,接受或拒绝函数便会被调用, // 并没有强制要求拒绝,所以,在调用它之前,请确认并检查文件是否存在! // 如果文件不存在,则什么也不做 Dropzone.confirm = function(question, accepted, rejected) { // 让用户点击确定或者接受按钮,如果用户接受,则调用 accepted()函数,反之调用rejected() 函数。 };
幸运的是,从3.7.0
开始,Dropzone 支持 maxFiles
选项。简单设置下,就可以达到你想要的数量要求。
如果你并不想拒绝查看的文件,那么只要简单的注册maxfilesexceeded
事件,然后立即删除该文件。
myDropzone.on("maxfilesexceeded", function(file) { this.removeFile(file); });