插件描述：DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库, 它是轻量级的，不依赖任何其他类库（如JQuery）并且高度可定制.
DropzoneJS
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库, 它是轻量级的，不依赖任何其他类库（如JQuery）并且高度可定制.
下载单独的 dropzone.js 并像下面这样在文件中引入:
<script src="./dist/dropzone.js"></script>
用法
使用dropzone的典型方式是通过创建一个 class 属性中包含 dropzone 的form 表单元素
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
<script>
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
</script>案例
$("#doc_area").dropzone({
url: url, //上传地址
method: method, //方式
addRemoveLinks: true,
maxFiles: 10,
maxFilesize: 512,
uploadMultiple: false,
parallelUploads: 100,
previewsContainer: false,
acceptedFiles: ".pdf, .doc,.txt,.docx,.xlsx,.xls",
success: function(file, response, e) {
var res = JSON.parse(response);
$(".div").append(str);
}
});配置选项
| 参数 | 描述 |
|---|---|
| url | 除了form元素以外的其他元素必须指定该参数(或当form元素没有操作属性)。您还可以提供一个函数,参数为files以及必须返回url(since v3.12.0) |
| method | 默认为"post",必要的时候你也可以设置为"put"。 您还可以提供一个函数,参数为files以及必须返回这个method(since v3.12.0) |
| parallelUploads | 同时上传多少个文件。(更多信息参见队列文件上传部分) |
| maxFilesize | 单位 MB |
| filesizeBase | 默认1000。这个定义的基础是否应该使用1000或1024来计算文件大小。1000是有效的,因为1000个字节等于1千字节,1024字节= 1 Kibibyte。你可以改变为1024，如果你不在乎的有效性。 |
| paramName | 文件上传后端接收的参数名。默认file。注意:如果你设置uploadMultiple为true,那么Dropzone会将[]附加到这个名字，也就是后端接收的是一个file[]数组。 |
| uploadMultiple | Dropzone是否在一个请求中发送多个文件。如果它设置为true,然后fallback部分的input元素须有multiple属性。这个选项也会触发其他事件(如processingmultiple)。有关更多信息,请参见事件部分。 |
| headers | 一个向服务器发送附加头的对象。如:headers: { "My-Awesome-Header": "header value" } |
| addRemoveLinks | 这将添加一个链接到每个文件，删除或取消预览文件(如果已经上传)。dictCancelUpload, dictCancelUploadConfirmation and dictRemoveFile三个参数可选。 |
| previewsContainer | 定义文件预览显示。如果为null就使用 Dropzone 默认的。可以使用一段普通的html元素或css选择器。被选择的html元素必须包含dropzone-previews样式类确保预览显示正常。 |
| clickable | 如果为true,dropzone元素本身将是可点击的,如果false将不可被点击。此外，还可以是一段普通的html或者css选择器，表示点击该元素触发资源管理器。 |
| createImageThumbnails | |
| maxThumbnailFilesize | 单位 MB。文件名超过这个极限时,缩略图将不会生成。 |
| thumbnailWidth | 如果为null,将使用图像的比例来计算它。 |
| thumbnailHeight | 与thumbnailWidth一样。如果两者都是null,图像将不会调整。 |
| maxFiles | 如果不为null,定义多少个文件将被处理。如果超过,事件maxfilesexceeded将被调用。相应地dropzone元素得到了类dz-max?files-reached，因此你可以提供视觉反馈。 |
| resize | 创建调整信息时被调用的函数。file作为函数第一个参数，同时必须返回一个对象包含srcX, srcY, srcWidth 、srcHeight 和相同的 trg*。这些值将被用于ctx.drawImage()函数。 |
| init | Dropzone初始化时调用的函数。你能在这个函数中设置事件侦听器。 |
| acceptedFiles | accept函数默认的实现函数，用于检查文件的mime类型或扩展。这是一个逗号分隔的mime类型和文件扩展名的数组。如。image/*,application/pdf,.psd。如果Dropzone是clickable,此选项将被用作accept函数的参数输入。 |
| accept | 一个接收file和done函数作为参数输入的函数。如果done函数调用无参数,文件会被处理。如果你在done函数中传入了参数(比如错误信息)文件将不会被上传。如果文件太大或不匹配的mime类型这个函数不会调用。 |
| autoProcessQueue | 当设置为false,你必须自身调用myDropzone.processQueue()上传文件。有关更多信息,请参见下面有关处理队列。 |
| previewTemplate | 一个字符串,其中包含模板用于每一个图像。改变它满足你的需求,但确保正确地提供所有元素。你可以在页面中建立这样一个容器:id="preview-template"(设置style="display: none;"),然后这样设置：previewTemplate: document.querySelector('preview-template').innerHTML。 |
| forceFallback | 默认值为false。如果为true,fallback将被强行使用。这是非常有用的测试服务器实现首要方式,确保一切如预期所想，并测试你的fallback显示如何。 |
| fallback | 当浏览器不支持时调用的函数。默认实现显示了fallback内的input域并添加一个文本。 |
| 为自定义的 dropzone,你也可以使用如下这些选项 | |
| dictDefaultMessage | 任何文件被拖拽进区域之前显示的信息。这通常是被一个图像,但默认为“Drop files here to upload”。 |
| dictFallbackMessage | 如果浏览器不支持,默认消息将被替换为这个文本。默认为“Your browser does not support drag'n'drop file uploads.”。 |
| dictFallbackText | 这将被添加在input file之前。如果你提供一个fallback元素,或者该选项为空该选项将被忽略。默认为“Please use the fallback form below to upload your files like in the olden days.”。 |
| dictInvalidFileType | 如果文件类型不匹配时显示的错误消息。 |
| dictFileTooBig | 当文件太大时显示。{{filesize}}` 和 {{maxFilesize}}` 将被替换。 |
| dictResponseError | 如果服务器响应是无效的时显示的错误消息。{{statusCode}}` 将被替换为服务器端返回的状态码。 |
| dictCancelUpload | 如果addRemoveLinks为true,文本用于取消上传链接的文字。 |
| dictCancelUploadConfirmation | 如果addRemoveLinks为true,文本用于取消上传的文字。 |
| dictRemoveFile | 如果addRemoveLinks为true,用于删除一个文件的文本。 |
| dictMaxFilesExceeded | 如果设置了maxFiles,这将是超过了设置的时候的错误消息。 |
PREVIOUS:
NEXT:
相关插件-上传
讨论这个项目（6）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
骚豆 3
2021/8/23 15:57:06
这个案例中没有删除图片的功能，经过我的研究，找到了解决方案，防止后人采坑浪费时间：
html代码部分：
<form action="http://localhost:8080/api/uploadImg" class="zone" id="my-awesome-zone"></form>
JS代码部分：
var myzone = new zone("#my-awesome-zone", {
url: "http://localhost:8080/api/uploadImg",
addRemoveLinks: true, //是否添加删除图片的超链接
success: function(file, response, e) {
//文件上传成功后的回调函数
console.log(response)
}
});最后：祝愿我们共同成长，早日成为大牛！
铁血丹心5628 0
2017/9/25 11:53:11
上述代码的 #doc_area
<script>
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
</script>我不太明白，请解释一下吧。
回复
江湖酒徒 0
2017/9/23 12:20:55
-
要是在上传后的文件右上角支持删除就圆满了
Peter@小飞侠1
2019/7/9 9:40:46
-
加上这个属性吧，addRemoveLinks :true；然后再调整一下样式，应该可以的
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
