基于HTML5的可拖拽多文件上传插件

HTML5 Based File Uploader Dupload.js

DImage 相关代码已经从 Dupload.js 在 2.2.0 版本中独立出去，具体查看DImage.js

使用方法 引入Dupload文件

CommonJS 方式引用

var Dupload = require('dupload');

AMD 方式引用

define(['dupload'], function(Dupload) { // ... });

全局方式，在HTML页面中引入:

<script src="dupload.min.js"></script>

注意：

dupload.js 中不包含 dimage.js 插件，无法使用 compress 功能，如需使用压缩请引入 dupload.min.js

HTML代码

提示:

上传多个文件时，file input要添加multiple属性。 android系统选择文件，file input要添加capture="camera"属性，才能打开相机。 未添加file控件html代码，且未指定fileInput参数，插件会自动生成一个图片选择控件。

注意:

添加了file控件html代码，必须指定fileInput参数，否则会触发两次 click 事件，出现2次文件选择器。 若使用了 FastClick 插件，__必须__在file控件父元素添加class needsclick ，否则container内部分甚至全部区域点击无效。 最新 Chrome 版本 52.0.2743.116 (64-bit), file的accept不兼容 image/*, 点击后弹出会有10s左右延迟。

<div class="container" style="width: 200px; height:200px; border: 1px solid black;"> <input class="du-fileinput" type="file" accept="image/jpeg,image/jpg,image/png" capture="camera" style="display:none;" /> </div>

建议:
HTML中不添加file控制代码，由插件自动生成

Javascript代码

Example：

var options = { url: "http://localhost/upload", fileInput: '.du-fileinput',// 可不写，自动生成并绑定事件 maxFilesize: 500, onProgress: function(du, file) { console.log(file.percent) }, onUploaded: function(du, file, response) { // your code to parse response // ... return false;// 不做处理 return true;// 触发onSuccess() return "error";// 触发onError() }, onSuccess: function(du, file, response) { console.log(file); }, onError: function(du, file, message) { alert(message); } } // 方法一: var du = new Dupload(".container", options);// 返回实例对象，可做更多操作 // 方法二: Dupload.create('.container', options); // 兼容方式 options.container = '.container' Dupload.create(options);// 静态方法 服务器端

数据返回格式没有要求，不过通常我们为了方便前端处理，都返回JSON格式。

参数

参数	类型	默认值	说明
构造参数
container	string or HTMLElement		拖拽敏感区域
params	object	{}	可选参数
params参数
url	string	null	ajax上传地址
method	string	POST	提交方式
withCredentials	boolean	false	支持跨域发送cookies
header	object	{}	请求头部信息
formData	object	{}	参数表，和上传请求同时发送
dataType	string	json	返回数据类型: text, json
fileVal	string	file	文件上传域的name
fileInput	string or HTMLElement	null	file控件css选择器, 若container里存在file控件，则必填。反之可不填，会自动生成一个图片控件
allowExts	string	null	允许的文件类型, 格式: 扩展名[,扩展名], 如: jpeg,jpg,png,gif,多个类型使用逗号,隔开
allowMimeTypes	string	null	允许的Mime类型, 格式: mime[,mime], 如: image/*,多个类型使用逗号,隔开
maxFilesize	int	8192	单个文件限制，单位: KB，默认：8M
maxFiles	int	null	最大上传数
parallelUploads	int	2	并行上传量，在进行多文件同时上传时的并发量
auto	boolean	true	自动上传，选择文件后自动执行上次文件动作
multi	boolean	true	允许多文件上传，头像修改建议设为false，或者将file input的multiple去掉
init	boolean	true	默认初始化
clickable	boolean	true	拖拽敏感区域是否可点击
compress	object	false	是否启用压缩功能，具体配置详见DImage.js
提示文字(Tips Text)
txtFileTooBig	string	文件上传限制最大为{{maxFilesize}}.	文件大小超过限制
txtInvalidFileType	string	不允许的文件类型	文件类型不允许
txtMaxFilesExceeded	string	最多能上传{{maxFiles}}个文件
txtCancelUploadTips	string	“您确定要取消上传吗？
回调函数（Callback)
onDragHover	function()		文件拖放。 【注意】dragover事件一定要清除默认事件，不然会无法触发后面的drop事件
onDragOver	function()		拖拽到敏感区域
onDragLeave	function()		离开敏感区域
onDrop	function(du, file)		文件选择后
onBefore	function(du, file)		上传之前
onProgress	function(du, file)		上传进度
onUploaded	function(du, file, response)		上传完毕。 【注意】不同返回值会回调不同函数: return false;// 不处理 return true;// 会调用onSuccess() return "error";// 会调用onError()
onSuccess	function(du, file, response)		上传成功
onError	function(du, file, response)		上传失败
onCancel	function(du, file)		上传取消
onDelete	function(du, file)		文件删除
onComplete	function(du)		文件全部上传完毕
file对象数据结构
file	object		文件对象数据结构，例如: {id: "kQtmYe2Mi07w0Z-T67cTzMmHixHB3Chx", name: "example.jpg", percent: "100.00", size: 8172, src: "", status: "success", type: "image/jpeg"}
外部方法
select	function()		文件选择，如果容器clickable=false，可手动调用此方法，触发fileinput的click事件
start	function()		上传开始，如果参数auto为false时，需要手动调用此方法
delete	function(id)		删除文件，参数id是file.id
setOption	function(option, value)		参数设置，支持3种形式： setOption('name', 'value') setOption('name', {key: value}) setOption({key: value, key2: {}})

更新日志 2.2.0 - 2017/06/23 新增图片翻转功能 移除 DImage 相关代码，将图片压缩、翻转操作独立为一个组件 DImage.js 2.1.1 - 2017/03/28 修复360浏览器无法获取MIME类型时，会压缩非图片文件的BUG 2.1.0 - 2017/03/20 新增 compress 参数，使用HTML5进行JPEG图片压缩 修改 maxFilesize 参数，默认值为8M 移除移动端浏览器检测函数 2.0.1 - 2016/12/21 调整部分代码 修复上传数量限制计算不准确的Bug 2.0.0 - 2016/12/20 新名字 Dupload.js 新增 Dupload.create(container, params) 静态方法 替换参数 requestHeaders => headers, formParams => 'formData', fileDataName => fileVal 整理所有外部方法到新增的Util类中 修复部分Bug 1.5.4 - 2016/08/29 新增 dataType 可选参数。 新增 select() 外部方法，用于触发 fileinput 的click事件。 1.5.3 - 2016/08/19 修复 Chrome 版本 52.0.2743.116 (64-bit), fileinput 点击触发后弹出有10s左右延迟的问题。 1.5.2 - 2016/07/15 修复 delete() 方法，在 files 中找不到等于id的文件，会删除最后一个文件的BUG。 修改 uploadFile(), setOption(), formatSize(), getSuffix(), guid() 5个方法。 修改 init() 方法，自动生成的文件选择器会依赖 multi, allowMimeTypes 参数。 替换 multipart_params 参数为 formParams。 新增 requestHeaders, allowMimeTypes 2个可选参数。 1.5.1 - 2016/05/29 移除兼容旧版FastClick单击无效果的代码。 1.5.0 - 2016/05/25 插件不再处理上传结果，直接调用onUploaded()由用户处理。 1.4.0 - 2016/04/08 调整大量代码结构。 上传完成后，如果是JSON会自动处理结果，否则直接调用onSuccess()函数由用户处理。 新增onBefore()回调函数，便于上传之前修改参数。 新增setOption()方法。