Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果,不依赖jQuery库。
使用Dropzone
我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class。
<form id="mydropzone" action="/upload.php" class="dropzone"></form>
就这样,Dropzone会自动找到.dropzone的表单form元素,并且通过action属性,上传到后台接收文件的程序,如upload.php,就像接受一个很普通的file input表单:
<input type="file" name="file" />
然后,在你的upload.php中写上传代码,Dropzone官网下载的只有js代码,没有后台的上传代码,不过,helloweba.com为您提供了php版的完整上传实例代码,欢迎下载源码。
接下来就是引入dropzone.js了。
<script src="dropzone.min.js"></script>
然后什么都不用做了,打开浏览器,测试拖拽上传效果。当然样式你可以自己写,也可以参照我们的实例代码。
还有一种情况,我们不希望上传的html中有form表单,那么好,我们只要在html中放置一个div#mydropzone
<div id="mydropzone" class="dropzone"></div>
然后,配置一下js调用:
var myDropzone = new Dropzone("div#mydropzone", { url: "upload.php"});
如果您使用的是jquery,那么jQuery版的可以这样调用:
$("#dropz").dropzone({ url: "upload.php" })
运行你的网页,是不是一样可以看到上传效果。
配置Dropzone
Dropzone的特色就在于非常灵活,提供了许多可选项、事件等。下面是Dropzone几个常用的配置项。
url:最重要的参数,指明了文件提交到哪个页面。
method:默认为post,如果需要,可以改为put。
paramName:相当于<input>元素的name属性,默认为file。
maxFilesize:最大文件大小,单位是 MB。
maxFiles:默认为null,可以指定为一个数值,限制最多文件数量。
addRemoveLinks:默认false。如果设为true,则会给文件添加一个删除链接。
acceptedFiles:指明允许上传的文件类型,格式是逗号分隔的 MIME type 或者扩展名。例如:image/*,application/pdf,.psd,.obj
uploadMultiple:指明是否允许 Dropzone 一次提交多个文件。默认为false。如果设为true,则相当于 HTML 表单添加multiple属性。
headers:如果设定,则会作为额外的 header 信息发送到服务器。例如:{"custom-header": "value"}
init:一个函数,在 Dropzone 初始化的时候调用,可以用来添加自己的事件监听器。
forceFallback:Fallback 是一种机制,当浏览器不支持此插件时,提供一个备选方案。默认为false。如果设为true,则强制 fallback。
fallback:一个函数,如果浏览器不支持此插件则调用。
只有对写程序充满热情,才能写出好的程序!
转载于:https://www.cnblogs.com/libin-1/p/6254366.html
Dropzone.js实现文件拖拽上传相关推荐
- dropzone.js php,Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能
注:本教程代码适用于Laravel 5.1版本. 1.概述 Dropzone 是目前最好的免费文件拖拽上传库,它拥有很多特性和选项以便你可以使用多种方式来自定义. 在Laravel项目集成Dropzo ...
- js实现文件拖拽上传并显示待上传的文件列表
此文章中完整的代码在我的github中:https://github.com/LiuFeng1011/WebTest/tree/master/upload 首先实现html页面的内容: <bod ...
- html5之多文件拖拽上传预览
最近对于html5预览功能很是感兴趣,特地拿出来研究一小下,并以一个小项目举例讲解. h5中的input有个type=file 就是文件上传控件,有个属性multiple就是h5新增的支持多选上传文件 ...
- 收藏个支持进度条与文件拖拽上传的js File Uploader
File Uploader:支持进度显示与文件拖拽的多文件上传前端JS脚本 分类: JavaScript 2012-03-11 19:20 2028人阅读 评论(11) 收藏 举报 目录(?)[+] ...
- 使用dropzone实现文件拖拽上传功能
前端代码,关于dropzone的配置我写在注释里了 <html> <head><meta charset="utf-8" /><%@inc ...
- html拖动文件读取文件内容,HTML5新功能之文件拖拽上传
当我们使用邮箱添加附件时,会看到提示我们将文件放到相应区域,如图: 当我们将拖拽文件悬停在相应区域后会进一步提示我们,放下鼠标,如图: 下面我们将进一步的了解下此过程,并实现该效果. 首先我们先了解下 ...
- JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能. 安装 下载dropzone.js文件并添加到页面中即可.Dropzone 不依赖 jQuery 框架. ...
- php dropzone.js中文教程,JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能. 安装 下载dropzone.js文件并添加到页面中即可.Dropzone 不依赖 jQuery 框架. ...
- php拖拽上传大文件,如何实现文件拖拽上传
拖拽选择文件 屏蔽默认事件 刚开始的时候,是在网上找了一个例子,这个例子中提到,需要在document上屏蔽和drag相关的所有事件的默认处理方式,代码如下:$(document).on({ drag ...
最新文章
- linux获取随机数的方法集合
- IDEA中安装Free Mybatis plugin插件实现从dao层到mapper层自由跳转
- 使用WSUS服务器为客户端安装安全补丁
- NewCode----数串
- 云原生安全厂商小佑科技获达泰资本千万级投资
- Python实现双色球号码随机生成
- 【T3】批次参照结存数量为0的也显示
- 常用第三方APP 的url scheme
- 十九. 用户注册 --- 短信验证码实现 2021-04-16
- 计算机桌面死机的原因是,电脑屏幕死机了怎么办
- Ubuntu18.04安装Pangolin0.6
- python输出语句print(3+5)_Python 3 print 函数用法总结
- IIS反向代理 URL重写 404或500 错误问题的解决方案
- Excel中ROUND、ROUNDUP、ROUNDDOWN函数详解
- Linux 查看服务器cpu信息常用命令大全
- 旧电脑利用:windows网页版魔镜【不需树莓派】
- java列表末尾添加元素_在迭代它时将元素添加到Java LinkedList的末尾
- Egret微信游戏接入
- LoadRunner技巧之IP欺骗
- 智慧灯杆行业:千亿级大市场!这种“杆”打开新风口
热门文章
- 热键枚举Winform程序全局热键与局部热键(键盘快捷键的捕获)
- ASP.NET那点不为人知的事(四)
- 关于AVR单片机熔丝位的设置和拯救方法大全 AVR单片机熔丝位的设置和详细的拯救方法...
- 常用的stsadm命令行参数
- 40个迹象表明你还是PHP菜鸟
- php加密手机版_PHP解密支付宝小程序的加密数据、手机号的示例代码
- 幂运算 数组_Super Pow:如何高效进行模幂运算
- mysql 5.7 缺点_MySQL · 特性分析 · MySQL 5.7 外部XA Replication实现及缺陷分析
- python解析json_python解析json文件
- android获取状态栏截屏按钮状态,关于代码截屏带状态栏的问题