当前位置:首页 > 网络技术 > 前端拖拽插件(vuejs可视化拖拽布局)(vue 实现拖拽插件)

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

longge2022-03-24 01:50:24网络技术47

今天给大家分享一款优秀的文件拖拽上传及图片预览开源类库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可视化拖拽布局)(vue 实现拖拽插件)” 的相关文章

Runtime Error! Program: ...Settings\Administrator\Application Data\Xapcn\update.exe

Runtime Error! Program: ...Settings\Administrator\Application Data\Xapcn\update.exe

我目前还在用windows xp sp3,前几天不知道怎么地,系统都弹出个错误窗口: Runtime Error! Program: ...Settings\Administrator\App...

突破聚友宽带的DNS劫持(联通dns劫持)

突破聚友宽带的DNS劫持(联通dns劫持)

最近访问网站,右下角无端端会弹出广告,检查了电脑很多遍确认没有中毒后,百度查询很多网友表示这是由于DNS被无耻地劫持的原因,也百度找了相关的解决方法。由于我用的是无线路由器,所以设置方法如下:...

原生javascript判断数组是否包含一个指定的值(js判断数组是否包含某个值)

原生javascript判断数组是否包含一个指定的值(js判断数组是否包含某个值)

方法一 array.indexOf()方法可以返回数组中某个指定的元素位置,该方法会从头到尾地检索数组,检测是否含有对应的元素,如果检索到,则返回元素第一次出现的位置,如果没有检索到,则返回-...

解决windows IIS服务器MP4视频不能播放的问题

解决windows IIS服务器MP4视频不能播放的问题

确认MP4视频已经上传至服务器,视频URL无法打开,视频不能播放,那么一般是IIS没有指定MIME类型,这类文件默认在IIS里是不能下载的。 添加MP4视频MIME类型步骤 打开IIS...

搜索引擎投票算法(大神总结的教程)(投票的方法)

搜索引擎投票算法(大神总结的教程)(投票的方法)

  《搜索引擎原理系列教程》这个虽然称不上书籍,但由于里面信息量以及内容比较实用,也弥补了百度白皮书的一些短板——话语浮于表面,另外值得鼓励的是,这个教程完全是由一个民间的SEO爱好者总结,这份精神值...

16个行业案例精彩解析实体店商业模式(实体连锁店商业模式特点及其优势)

16个行业案例精彩解析实体店商业模式(实体连锁店商业模式特点及其优势)

课程介绍16个行业案例精彩解析实体店商业模式,让赚钱更快、更多、更轻松! 学习地址百度:https://pan.baidu.com/s/13YIisvQc6gh8OgVpaAC0QQ天翼:h...