前端拖拽插件(vuejs可视化拖拽布局)
程序员文章站
2023-12-18 08:05:52
今天给大家分享一款优秀的文件拖拽上传及图片预览开源类库dropzonejs。dropzonejs 基于javascript构建的轻量级web文件拖拽上传插件,star高达15.3k+。零依赖且高度可定...
今天给大家分享一款优秀的文件拖拽上传及图片预览开源类库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">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
// dropzone class:
var mydropzone = new dropzone("div#myid", { url: "/file/post"});
// jquery
$("div#myid").dropzone({ url: "/file/post" });
兼容性
- chrome 7
- firefox 4
- ie 10
- opera 12
- safari 6
图片预览模板
可以配置previewtemplate来自定义模板。
<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>
提供了非常丰富的参数及事件列表,满足多样化上传需求。