小樱知识 > 生活常识前端拖拽插件(vuejs可视化拖拽布局)

前端拖拽插件(vuejs可视化拖拽布局)

提问时间:2022-03-10 14:43:01来源:小樱知识网


今天给大家分享一款优秀的文件拖拽上传及图片预览开源类库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>

提供了非常丰富的参数及事件列表,满足多样化上传需求。

以上内容就是为大家推荐的前端拖拽插件(vuejs可视化拖拽布局)最佳回答,如果还想搜索其他问题,请收藏本网站或点击搜索更多问题

内容来源于网络仅供参考
二维码

扫一扫关注我们

版权声明:所有来源标注为小樱知识网www.xiaoyin02.com的内容版权均为本站所有,若您需要引用、转载,只需要注明来源及原文链接即可。

本文标题:前端拖拽插件(vuejs可视化拖拽布局)

本文地址:https://www.xiaoyin02.com/shcs/97398.html

相关文章