今天给大家分享一款优秀的文件拖拽上传及图片预览开源类库DropZoneJS。
![1561526046ad96c6ba64baf550bb4a62.png](https://i-blog.csdnimg.cn/blog_migrate/39aac0e309ec2bd8f3c89197c56a579a.jpeg)
dropzonejs 基于Javascript构建的轻量级web文件拖拽上传插件,star高达15.3K+。零依赖且高度可定制化。
![2d1326534e8800814b9ca9bfd276b953.png](https://i-blog.csdnimg.cn/blog_migrate/47bccd7997e246aec88831b7d18280ca.jpeg)
下载
https://github.com/enyo/dropzone/archive/v5.7.0.zip
下载完毕后,引入dropzone.js插件。
快速使用
// Dropzone class:var myDropzone = new Dropzone("div#myId", { url: "/file/post"});// jQuery$("div#myId").dropzone({ url: "/file/post" });
![d6c85ac7a68da87988aafa8530b73c10.png](https://i-blog.csdnimg.cn/blog_migrate/a9ce772bc73e4a51489fc0b2a3f7df97.jpeg)
![3dbb9587febac9a02d9e152d8052bf80.png](https://i-blog.csdnimg.cn/blog_migrate/8a3411c0d5b1a3dc38d0364a5e82c9c8.jpeg)
兼容性
- Chrome 7
- Firefox 4
- IE 10
- Opera 12
- Safari 6
图片预览模板
可以配置previewTemplate来自定义模板。
![]()
✔
✘
提供了非常丰富的参数及事件列表,满足多样化上传需求。
![96275bf0a01890c29e9b31f905463acb.png](https://i-blog.csdnimg.cn/blog_migrate/1feb8fcac02a0e764b005f07b58b6ad8.jpeg)
![702969939544ef202dd8d0ebe11b6e5d.png](https://i-blog.csdnimg.cn/blog_migrate/5b199ae4d534d097556789b059c5d283.jpeg)
# 官网地址https://www.dropzonejs.com/# 仓库地址https://github.com/enyo/dropzone
ok,今天就分享到这里。如果大家用的到的话,可以去看下哈!