前端拖拽插件（vuejs可视化拖拽布局）
今天给大家分享一款优秀的文件拖拽上传及图片预览开源类库DropZoneJS。
dropzonejs 基于Javascript构建的轻量级web文件拖拽上传插件，star高达15.3K+。零依赖且高度可定制化。
下载
https:&/&/github.com/enyo/dropzone/archive/v5.7.0.zip下载完毕后，引入dropzone.js插件。
&<script src="./path/to/dropzone.js"&>&</script&>快速使用
&<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"&>&</form&>&<input type="file" name="file" /&>&<form action="/file-upload" class="dropzone"&> &<p class="fallback"&> &<input name="file" type="file" multiple /&> &</p&>&</form&>// Dropzone class:var myDropzone = new Dropzone("p#myId", { url: "/file/post"});// jQuery$("p#myId").dropzone({ url: "/file/post" });兼容性
Chrome 7Firefox 4IE 10Opera 12Safari 6
图片预览模板
可以配置previewTemplate来自定义模板。
&<p class="dz-preview dz-file-preview"&> &<p class="dz-details"&> &<p class="dz-filename"&>&<span data-dz-name&>&</span&>&</p&> &<p class="dz-size" data-dz-size&>&</p&> &<img data-dz-thumbnail /&> &</p&> &<p class="dz-progress"&>&<span class="dz-upload" data-dz-uploadprogress&>&</span&>&</p&> &<p class="dz-success-mark"&>&<span&>?&</span&>&</p&> &<p class="dz-error-mark"&>&<span&>?&</span&>&</p&> &<p class="dz-error-message"&>&<span data-dz-errormessage&>&</span&>&</p&>&</p&>提供了非常丰富的参数及事件列表，满足多样化上传需求。