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


今天给大家分享一款优秀的文件拖拽上传及图片预览开源类库DropZoneJS

dropzonejs 基于Javascript构建的轻量级web文件拖拽上传插件,star高达15.3K+。零依赖且高度可定制化。

下载

https://github.com/enyo/dropzone/archive/v5.7.0.zip

下载完毕后,引入dropzone.js插件。

<script src="http://www.5114.net/news/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>

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


上一篇:论坛发帖软件有效果吗 免费自动发帖神器)

下一篇:c++new的用法教程 c++动态分配内存)


蚂蚁钢琴网 2008-2025 www.somall.com.cn 皖ICP备2023010105号
大写数字 热点城市 热点地区 热点街道 热点时间 房贷计算器
钢琴调律 钢琴调音 钢琴调律价格
温馨提示:部分文章图片数据来源与网络,仅供参考!版权归原作者所有,如有侵权请联系删除!
违法和不良信息24小时举报热线:18056540210