Dropzone.js实现文件拖拽上传功能(附源码下载)


Posted in Javascript onNovember 22, 2016

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果,不依赖jQuery库。

Dropzone.js实现文件拖拽上传功能(附源码下载)

效果演示      源码下载

使用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:一个函数,如果浏览器不支持此插件则调用。

以上所述是小编给大家介绍的Dropzone.js实现文件拖拽上传,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中eval详解
Mar 30 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
Bootstrap插件全集
Jul 18 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
解析jQueryEasyUI的使用
Nov 22 #Javascript
详解jQuery插件开发方式
Nov 22 #Javascript
AngularJS中isolate scope的用法分析
Nov 22 #Javascript
详解js界面跳转与值传递
Nov 22 #Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 #Javascript
JavaScript面向对象分层思维全面解析
Nov 22 #Javascript
浅析location.href跨窗口调用函数
Nov 22 #Javascript
You might like
PHP和XSS跨站攻击的防范
2007/04/17 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
php简单截取字符串代码示例
2016/10/19 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
Python多线程实现同步的四种方式
2017/05/02 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
办理生育手续介绍信
2014/01/14 职场文书
初中校园广播稿
2014/02/02 职场文书
校园安全演讲稿
2014/05/09 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
见习报告的格式
2014/11/04 职场文书
户外活动总结
2015/02/04 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
教务处教学工作总结
2015/08/10 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android