dropzonejs中⽂翻译⼿册DropzoneJS是⼀个提供⽂件拖拽上传并且提供图⽚预览。。。
由于项⽬需要，完成⼀个web的图⽚拖拽上传，也就顺便学习和了解了⼀下前端的⽐较新的技术：HTML5的api，作为⼀名前端的菜鸟，没什么可说的，直接分享⾃⼰学习的资料：
关于HTML5 的这些新的特性⼤家可以到Mozilla的开发者社区MDN /zh-CN/ 上查HTML5的资料
还有就是发掘到的⽐较⽜逼的⼀篇博客：blog.bingo929/renren-drag-drop-photo-filereader-formdata.html
实现图⽚拖拽上传需要⽤到那些技术？
拖拽上传应⽤主要使⽤了以下HTML5技术：
Drag&Drop : HTML5基于拖拽的事件机制.
File API : 可以很⽅便的让Web应⽤访问⽂件对象，File API包括FileList、Blob、File、FileReader、URI scheme，本⽂主要讲解拖拽上传中⽤到的FileList和FileReader接⼝。
FormData : FormData是基于XMLHttpRequest Level 2的新接⼝，可以⽅便web应⽤模拟Form表单数据，最重要的是它⽀持⽂件的⼆进制流数据，这样我们就能够通过它来实现AJAX向后端发送⽂件数据了。
菜鸟的尴尬！
plt subplots函数作为⼀个前端菜鸟，公司能给你4、5个⼩时调查实现所需要的技术已经很慷慨了。所以你想要对领导说：我要学习这个学习那个然后才能做。呵呵，那是不可能的。现在的公司做的都是敏捷开发，讲求的是效率、成本控制，所以不会给你时间学会在来做东西的。那么怎么办？我们强⼤的js有着丰富的插件，使⽤这些类库各⽅⾯来说都要⽐⾃⼰写的要好，⾄少CSS不⽤⾃⼰考虑太多，⽽且功能上⽐⾃⼰写的要好很多，毕竟时间有限，功⼒还不够。只能设想个时间学习这些底层的技术，将来可以⾃⼰写。好了！说说今天的插件Dropzonejs
翻译初衷？
其实也算不上翻译，只是这个类库很⼩，⾃⼰在看官⽅⼿册的时候忽然想着，看英⽂总是觉得有点慢，但是开发的过程中我们需要反复查⼿册，学习⼿册。这样还不如在我第⼀次通读⼿册时，⼀边读⼀边写下翻译，就这样有了这个翻译的⼿册，全凭理解和翻译⼯具。可能会有⼀些理解错误的地⽅，但是⽆论怎样也算是有了⼀个⾃⼰整理的⼿册了，上周项⽬完成了，今晚闲着就把这些整理出来，
分享个⼤家
DropzoneJS是什么？
DropzoneJS是⼀个提供⽂件拖拽上传并且提供图⽚预览的开源类库，它是轻量级的，不依赖任何其他类库（如JQuery）并且⾼度可定制.
DropzoneJS相关信息
官⽹：
GitHub：
DropzoneJS中⽂⼿册
地址：
mvc医学上代表是什么这个⼿册是我把官⽹copy了⼀份，然后制作的⼀个静态的⼿册
好了，很简单的⼀个js类库，⼤家有需要了可以对看看我翻译的中⽂，如果我的翻译有什么错误可以留⾔或者在
GitHub:github/wxb/dropzonejs.zh-CN 上issue
新闻
我刚刚发布 Dropzone v4.0.0! 它已经完全重新设计, 并已更新的⽹站. ⾮常感谢设计新的 logo 和⽹站. 它看起来⾮常棒. 看看他们的⼯作!
我在 COLORGLARE 上最新的⽂章: . 如果你对我的⼯作感兴趣，请订阅我的 .
我的乐队, Gin Ga, 最近发布了⼀张新专辑 ! 它叫做«YES / NO» 已经可以在 Spotify 和商店下载. 你可以看到我们 .
安装
你也许只要看⼀下这个 () 就可以开始. 继续⼀步⼀步学习下⾯的知道和不同的安装⽅法.
下载单独的并像下⾯这样在⽂件中引⼊:
<script src="./path/to/dropzone.js"></script>
现在,Dropzone 已经被激活，⽤window.Dropzone来使⽤.
Dropzone 不会处理你上传到服务器上⾯的⽂件. 你必须⾃⼰编写代码实现接受和保存上传的⽂件. 请参考部分的详细信息.
这是你需要运⾏dropzone上传代码的所有⼯作, 但是如果你想要让你的dropzone拥有和本页⾯上的dropzone⼀样的效果, 你就需要从中下载样式⽂件 dropzone.css.
使⽤组件
如果你要使⽤你只需要添加 dropzone 作为⼀个依赖:
"enyo/dropzone": "*"
然后就像下⾯这样引⼊:
var Dropzone = require("dropzone");
这样他就被激活了并⾃动扫描⽂档.
基础的CSS样式也被包含在组件中, 但是如果你想让它看起来和本页⼀样, 你就必须现在CSS⽂件 (见下⽂).
使⽤ RequireJS
Dropzone is also available as an for .
You can find the in the downloads folder.
⽤法
vectorjava用法使⽤dropzone的典型⽅式是通过创建⼀个 class 属性中包含dropzone的form 表单元素 :
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone"></form>
就是这么简单，Dropzone将查所有的 class 属性中包含 dropzone 的表单元素, 的表单元素，⾃动地把⾃⼰加⼊到表单元素上，并且拖拽进的这些上传⽂件将被发送到action这个特殊的参数. 这些上传⽂件将被正常处理就像这⾥是⼀段像下⾯这样的HTML代码:
<input type="file" name="file" />
如果你想使⽤其他的名字来替换file你可以在中设置选项paramName.
如果你正在使⽤组件，别忘记require("dropzone")；否则他将不会被激活.
如果你想要你的⽂件上传正确⼯作，甚⾄在没有JavaScript环境中, 你可以引⼊⼀个 class是fallback的元素, 在浏览器⽀持的情况下, dropzone 会删除这个元素 . 如果浏览器不⽀持, Dropzone 将不会删除 fallback 元素，前提是你提供了这个元素. (显然, 如果浏览器不⽀持JavaScript,form 将保持原来的样⼦)
通常会看起来像这样:
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
程序化的⽅式创建 dropzones
或者你可以程序化⽅式创建 dropzones (甚⾄不在form元素上) 通过初始化⼀个Dropzone类对象
// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
或者如果您使⽤ jQuery，您可以使⽤ Dropzone 附带的 jQuery 插件:
// jQuery
$("div#myId").dropzone({ url: "/file/post" });
不要忘记指定url选项如果您不使⽤窗体元素，因为 Dropzone 不知道在哪⼉发布到⽆action属性.
服务器端实现
Dropzone 并不提供服务器端实现的处理⽂件，但是⽂件的⽅式都是上传就等于像这样简单的⽂件上传表单:
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
</form>
若要处理服务器上的基本⽂件上传，请看看相应的⽂件中的处理⽅法。这⾥只提供了⼀些，如果你认为我应该添加⼀些，请与我联系.
by startutorial
written by Maksim Surguy
付费⽂档:
parsefloat函数010by startutorial.
请如果您需要更多的信息看.
配置
这⾥有两种⽅式配置 dropzones.
最明显的⽅式是通过程序化的⽅法实例化⼀个dropzone 对象, 就像上⼀节看到的⼀样.
但是如果你仅仅使⽤⼀个class是dropzone的HTML元素, 不想以程序化的⽅式实例化⼀个对象, 所以你就必须在某个地⽅保存配置信息以便让Dropzone 实例化dropzones的HTML元素时知道如果配置它们.
通过使⽤Dropzone.options对象.
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
// "myAwesomeDropzone" 是dropzone的HTML元素ID的驼峰命名
AwesomeDropzone = {
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(); }
}
};
如果您想要禁⽤⾃动发现 Dropzone ⾏为, 你也可以在每个元素基础或在⼀般全局上禁⽤它:
// Prevent Dropzone from auto discovering this element:
// 阻⽌ Dropzone ⾃动寻这个元素:
AwesomeDropzone = false;
/
/ This is useful when you want to create the
// Dropzone programmatically later
// Disable auto discover for all elements:
// 禁⽌对所有元素的⾃动查:
Dropzone.autoDiscover = false;
配置项
选项描述
必须被设置，当dropzone在 form 表单以外的元素上时[译者注:dropzone不⼀定要在form元素上，也可以在⼀个div上，这⾥
的意思就是假如在⼀个div上时必须设置URL](或者form表单没有action属性). 你也可以提供⼀个被files调⽤的函数并且必
须返回 url (从v3.12.0开始)
默认"post"如有必要也可以修改成"put" . 你也可以提供⼀个被files调⽤的函数并且必须返回 method (since v3.12.0)
有多少⽂件将上载到并⾏处理 (见进⾏排队⽂件上传部分获取更多信息)[译者注：本⼈在使⽤过程发现：当使⽤⼿动上传
时，每次只能上传两个⽂件，这样需要多次点击才能实现所有上传，最后学习了⼀下 Enqueuing file uploads ⾥⾯的关于
⾃动上传时的处理流程，设置了这⾥的参数时，才能⼀下⼦全部队列上传]
⾃动上传时的处理流程，设置了这⾥的参数时，才能⼀下⼦全部队列上传]以MB 为单位[译者注：上传⽂件的⼤⼩限制]默认值为 1000. 这个选项将设置在计算⽂件⼤⼩时使⽤ 1000 还是使⽤ 1024作为基本单位. 1000 是正确的, 因为 1000 Bytes 等
于 1 Kilobyte , 1024 Bytes 等于 1 Kibibyte . 如果你不在乎有效性，您可以更改这个选项为 1024 .
设置传输⽂件名称参数. 默认是 file . 注意: 如果你将配置项 uploadMultiple 设置为 true , 那么 Dropzone 将在paramName 设置的
name 的后⾯追加 [].
是否 Dropzone 应该在⼀个请求中发送多个⽂件. 如果此设置为 true ，然后fallbach 中 input 的元素将具有multiple 属性. 此选
项还会触发其他事件 (如 processingmultiple ). 请参阅事件部分了解更多信息.
要向服务器发送的其他头⽂件的对象. 例如: headers: { "My-Awesome-Header": "header value" }
在每个预览⽂件下⾯添加⼀个remove[删除]或者cancel[取消](如果⽂件已经上传)上传⽂件的链接[译者注：这⾥的删除和
取消只是从上传队列中取消了，并没有在服务器上删除]. dictCancelUpload , dictCancelUploadConfirmation 和 dictRemoveFile 这三个
配置项⽤来⾃定义设置相应操作链接的显⽰⽂字.[本项设置时布尔值，true 开启/false 关闭]
定义⽂件预览显⽰位置， 定义为 null 时， 将会消失在Dropzone 元素中. 可以设置成⼀个HTML 元素或者⼀个CSS 选择器.
这个元素的class 中应该包含dropzone-previews 以便正确显⽰预览.
若果设置 true , dropzone 元素本⾝将可以点击, 如果设置 false dropzone 没有地⽅可供点击. 否则你也可以通过⼀个HTML 元
素，⼀个CSS 选择器（多个HTML 元素）或者其他的数组.
以MB 为单位[译者注：也可以使⽤⼩数]. 当⽂件名[译者注：这问是filename ，但是测试后发现应该是出错了这⾥应该是指⽂
件⼤⼩]超出这⾥的设置, 将不会⽣成缩略图.
默认 null , 设置缩略图的缩略⽐[译者注：设置width ，配合下⾯的thumbnailHeight ⼀起使⽤].
就像 thumbnailWidth ⼀样. 如果为空, 将不能重置尺⼨.
如果不为 null ，这⾥设置 Dropzone 最多可以处理多少⽂件. 如果超过这个限制, maxfilesexceeded 事件将被调⽤. dropzone
将通过 class 为dz-max- files-reached 反馈⼀些信息给你.
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().
Dropzone 初始化时调⽤的函数，你可以在这个⽅法中设置时间监听.acceptedMimeTypes 已经废弃， 使⽤acceptedFiles 代替
accept 实现检查⽂件的 mime 类型或扩展名， 使⽤逗号分隔⽂件类型或者扩展名列表. 例如 Eg.: image/*,application/pdf,.psd . 如
果 Dropzone 是 clickable [译者注：即配置项clickable 是true], 本项将被⽤作 的参数，就和在 隐藏的 file input ⼀样.
使⽤⼀个 和⼀个done 函数 作为参数的函数. 如果不带参数调⽤ done 函数时，将处理该⽂件. 如果你显⽰⼀条错误信息，
该⽂件将不会被上传. 如果⽂件太⼤或不匹配的 mime 类型，将不调⽤此函数.enqueueForUpload 已废弃，被 autoProcessQueue 取代.
当设置 false 你必须⾃⼰像这样 myDropzone.processQueue() 的调⽤来上传队列中的上传⽂件. 请参阅下⾯有关处理队列的详细
信息.
是⼀个包含预览dropzone 上传的每个⽂件的模板字符串. 更改它以满⾜您的需求，但请务必提供正确的所有元素. You can
在你的页⾯中包含 <div id="preview-template" ></div> 这样的HTML 容器, 并且像这样设置: previewTemplate:
document.querySelector('preview-template').innerHTML .
默认 false . 如果设置true 将强制使⽤ fallback .这在测试你的服务器端实现和确保⼀切如你预期的⼀样正常⼯作在没有使⽤
dropzone 的情况下，防⽌你⼀些经验上的错误，同时可以给你展⽰fallbacks 是怎样显⽰的 .
这是⼀个⽅法，当浏览器不⽀持的时候调⽤. 默认实现展⽰ fallback input 字段 和⼀段⽂本.
若要翻译 dropzone ，还可以提供这些选项：获取显⽰之前的任何⽂件被删除的消息。这通常是由图像，但默认为"Drop files here to upload"所取代
如果浏览器不受⽀持，此⽂本将替换默认的消息。默认值为"Your browser does not support drag'n'drop file uploads."
这点⽂本将在 file input 元素选择⽂件前显⽰ . 如果你⾃⼰提供了 fallback 元素, 或者本项设置成 null 这段⽂本将被忽略. 默
认是 "Please use the fallback form below "
如果该⽂件与⽂件类型不匹配所⽰的错误消息.
当显⽰该⽂件太⼤。{{filesize}} 和 {{maxFilesize}} 将被替换.
如果服务器响应⽆效时的错误消息。{{statusCode}}将被替换的服务器状态代码
如果addRemoveLinks 为 true ，这段⽂本⽤来设置取消上载链接的⽂本
如果addRemoveLinks 为 true ，这⾥设置的⽂本将⽤于确认取消上载时显⽰.
如果addRemoveLinks 为 true ，这段⽂本⽤来设置删除⽂件显⽰⽂本.
如果设置了maxFiles ，这⾥设置的⽂本将在⽂件超出maxfiles 设置值时显⽰.
配置项选项描述您也可以重写所有的选项中的默认事件操作. 所以如果您提供选项 drop 你可以重写默认的 drop 事件处理. 如果你打算这样做，那么
你应该对这些代码有所熟悉，因为你可以很容易打断上传程序 如果你仅仅想要做像在这⾥或者哪⾥添加⼀些 class, 那么添加 是
最好的⽅法!
队列⽂件上传
当⼀个⽂件被添加到 dropzone 时, 它的 status 就被设置成了 Dropzone.QUEUED (前提是已经通过了 accept 函数的检查) ，这就意味着这个⽂件已经在上传队列中了.
如果你设置了选项autoProcessQueue为true, 然后队列就会被⽴即处理, 在⽂件拖放到zone或者上传完成后, 调⽤.processQueue()来检查当前有多少⽂件正在被上传, 如果它的值[译者注：processQueue()返回的⽂件数] ⼩于options.parallelUploads的设置值时, 就会调⽤.processFile(file).
如果你设置autoProcessQueue为false, 那么.processQueue()⽅法是不会被隐式调⽤的. 这意味着你必须在你想要上传队列中的所有⽂件时，⾃⼰去调⽤这个⽅法[译者注：这是很有⽤的，当我们使⽤点击按钮上传时，我们就可以设置这⾥为false，同时我们也应该清楚：这⾥的⼿动上传和上⾯所说的⾃动
上传的实现逻辑是⼀样的，只是这⾥我们让程序不去⾃动上传；所以在前⾯说到的关于，多个⽂件点击上传时每次只能同时上传两个，需要很多次点击，如果我们要⼀次点击上传全部，我们就应该理解上⾯⾃动提交时的逻辑，设置options.parallelUploads，这是本⼈使⽤时发现的问题].
布局
jquery下载文件插件这是⽤选项previewTemplate定义的⼀段⽤来显⽰每个dropzone上传⽂件预览的HTML代码，其默认HTML是这样的:
<div class="dz-preview dz-file-preview">
<div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div>
<div class="dz-size" data-dz-size></div>
<img data-dz-thumbnail />
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-success-mark"><span>✔</span></div>
<div class="dz-error-mark"><span>✘</span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
</div>
在容器 (dz-preview) 中，dz-processing是⽂件上传时的显⽰样式, dz-success是⽂件上传成功时显⽰ and dz-error是⽂件没有上传时显⽰样式. 最后⼀个, data-dz-errormessage将包含服务器返回的⽂本信息.
想要重写默认的模板, 使⽤配置项 config.
你可以在任何事件中访问⽂件预览的HTML 通过使⽤file.previewElement.
如果你决定从零开始重新previewTemplate , 你应该在⾥⾯放上⽤data-dz-*参数定义的元素 :
data-dz-name
data-dz-size
data-dz-thumbnail (这⾥必须是⼀个<img />元素，并且alt和src属性将被 Dropzone改变)
data-dz-uploadprogress ( 当这⾥有⼀个uploadprogress事件时， Dropzone 将更改style.width属性从0%到100% )
data-dz-errormessage
Dropzone 的默认选项将寻这些元素，并为它更新的内容.
如果你想要⼀些特殊的链接来删除⽂件(⽽不是使⽤内置的配置 ), 你可以简单地在模板中插⼊⼀个属性值是data-dz-remove的HTML元素. 例如: <img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />
并不强制要求你去配置修改这些，如果你重写了所有的默认事件侦听器，你完全可以从零开始重建你的布局.
如果你想让你的dropzone看起来和本页显⽰⼀样的效果，应该如何添加样式表和脚本？请参阅安装部分.
js幻灯片全屏请参阅部分较为深⼊看看如何改变 Dropzone 的⽤户界⾯.
我创建了⼀个例⼦，我只是⽤来⼏⾏简单的配置，就让 Dropzone 看起来和感觉起来跟 jQuery 上传⽂件的⽅式完全⼀样.
再次, 如果你仍然不清楚某些功能，请去看看 .
Dropzone ⽅法
如果你想删除已添加到dropzone中的⽂件，你可以调⽤.removeFile(file). 这个⽅法也可以触发removedfile事件.
下⾯是⼀个当⽂件上传完成后⾃动删除⽂件的⽰例:
<("complete", function(file) {
});
如果你想删除所有的⽂件，简单的使⽤.removeAllFiles()就可以了.这样调⽤删除⽂件并不会删除正在
被上传的⽂件. 如果你想要取消正在上传的⽂件, 调⽤.removeAllFiles(true)将会取消正在上传的⽂件.
如果你设置autoProcessQueue禁⽤了⾃动上传, 你需要⾃⼰调⽤.processQueue().
这是很有⽤的，如果你想显⽰⽂件让⽤户点击确认按钮来上传⽂件.
若要访问 dropzone 中的所有⽂件，请使⽤myDropzone.files[译者注：这⾥的myDropzone指的是dropzone对象，files是下⾯的这些⽅法].
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论