js (html5 + html4) 文件上传管理器，支持上传进度显示，支持秒传+分片上传+断点续传，支持图片预览+缩放，支持 IE6+、Firefox、Chrome等。
- 轻量级，不依赖任何JS库，核心代码（Q.Uploader.js）仅约700行，min版本加起来不到12KB
- 纯JS代码，无需Flash，无需更改后台代码即可实现带进度条（IE10+、其它标准浏览器）的上传，其它（eg：IE6+）自动降级为传统方式上传
- 单独的图片上传UI，支持图片预览（IE6+、其它浏览器）和缩放（IE10+、其它浏览器）
- 支持秒传+分片上传+断点续传（IE10+、其它标准浏览器），适应多种上传环境（默认基于md5，不限于浏览器和使用场景，只要文件相同即可；也可自行实现hash计算）
- 上传文件的同时可以指定上传参数，支持上传类型过滤
- 完善的事件回调，可针对上传的每个过程进行单独处理
- 上传核心与UI界面分离，方便的UI接口，可以很方便的定制上传界面包括上传按钮
演示前请在根目录下创建upload文件夹，以保存上传文件
执行程序：api/upload.ashx
asp.net 4.0+
iis
Node.js 演示见web-uploader-node
例：一般文件上传，使用默认的UI
1. 导入样式文件(若自己实现UI接口，则无需导入默认的样式文件)
<link href="css/uploader.css" rel="stylesheet" type="text/css" />
2. 导入js文件（可自行合并，若自己实现UI接口，则无需导入 Q.Uploader.UI.js 文件）
<script type="text/javascript" src="js/Q.js"></script>
<script type="text/javascript" src="js/Q.Uploader.js"></script>
<script type="text/javascript" src="js/Q.Uploader.UI.js"></script>
或
<script type="text/javascript" src="Q.Uploader.all.js"></script>
3. 调用
new Q.Uploader({
url:"api/upload.ashx",
target: element, //上传按钮
view: element //上传任务视图
});
例：图片上传+预览+缩放
1. 导入样式文件(若自己实现UI接口，则无需导入默认的样式文件)
<link href="css/uploader-image.css" rel="stylesheet" type="text/css" />
2. 导入js文件（可自行合并）
<script type="text/javascript" src="js/Q.js"></script>
<script type="text/javascript" src="js/Q.Uploader.js"></script>
<script type="text/javascript" src="js/Q.Uploader.Image.js"></script>
或
<script type="text/javascript" src="Q.Uploader.image.all.js"></script>
3. 调用
new Q.Uploader({
url:"api/upload.ashx",
target: element, //上传按钮
view: element, //上传任务视图
allows: ".jpg,.png,.gif,.bmp",
//图片缩放
scale: {
//要缩放的图片格式
types: ".jpg",
//最大图片宽度（maxWidth）或高度（maxHeight）
maxWidth: 1024
}
});
new Q.Uploader({
//--------------- 必填 ---------------
url: "", //上传路径
target: element, //上传按钮
view: element, //上传任务视图(若自己实现UI接口，则无需指定此参数)
//--------------- 可选 ---------------
html5: true, //是否启用html5上传,若浏览器不支持,则自动禁用
multiple: true, //选择文件时是否允许多选,若浏览器不支持,则自动禁用(仅html5模式有效)
clickTrigger:true, //是否启用click触发文件选择 eg: input.click() => ie9及以下不支持
auto: true, //添加任务后是否立即上传
data: {}, //上传文件的同时可以指定其它参数,该参数将以POST的方式提交到服务器
dataType: "json", //服务器返回值类型
workerThread: 1, //同时允许上传的任务数(仅html5模式有效)
upName: "upfile", //上传参数名称,若后台需要根据name来获取上传数据,可配置此项
allows: "", //允许上传的文件类型(扩展名),多个之间用逗号隔开
disallows: "", //禁止上传的文件类型(扩展名)
//秒传+分片上传+断点续传,具体见示例（demo/slice.html）
isSlice: false, //是否启用分片上传，若为true，则isQueryState和isMd5默认为true
chunkSize: 2 * 1024 * 1024, //默认分片大小为2MB
//查询路径为： url?action=query&hash=file hash
isQueryState:false, //是否查询文件状态（for 秒传或续传）
isMd5: false, //是否计算上传文件md5值
isUploadAfterHash:true, //是否在Hash计算完毕后再上传
container:element, //一般无需指定
getPos:function, //一般无需指定
//上传回调事件(function)
on: {
init, //上传管理器初始化完毕后触发
select, //点击上传按钮准备选择上传文件之前触发,返回false可禁止选择文件
add, //添加任务之前触发,返回false将跳过该任务
upload, //上传任务之前触发,返回false将跳过该任务
hashProgress, //文件hash进度（仅isMd5为true时有效）
hash, //查询状态之前触发（for 秒传或续传）
sliceQuery, //秒传查询之前触发
sliceUpload, //分片上传之前触发，返回false将跳过该分片
send, //发送数据之前触发,返回false将跳过该任务
cancel, //取消上传任务后触发
remove, //移除上传任务后触发
progress, //上传进度发生变化后触发(仅html5模式有效)
complete //上传完成后触发
},
//UI接口(function),若指定了以下方法,将忽略默认实现
UI:{
init, //执行初始化操作
draw, //添加任务后绘制任务界面
update, //更新任务界面
over //任务上传完成
}
});
说明：回调事件(add、upload、hash、sliceUpload、send)支持异步调用，只需在后面加上Async即可，比如在上传之前需要访问服务器验证数据，通过的就上传，否则跳过
on: {
uploadAsync: function (task, callback) {
$.postJSON(url, function (json) {
//若 json.ok 返回false，该任务不会上传
callback(json.ok);
});
},
//计算文件hash
hashAsync: function(task, callback){
Q.md5File(task.file, function(md5){
//task.hash:秒传或断点续传唯一标识
task.hash = md5;
callback();
});
},
//分片上传之前触发
sliceUploadAsync: function (task, callback) {
log(task.name + ": 上传分片 " + task.sliceIndex + " / " + task.sliceCount);
callback();
}
}
var uploader = new Q.Uploader(ops);
//上传任务列表，数组
uploader.list
//当前上传任务索引 => var task = uploader.list[uploader.index];
uploader.index
//添加上传任务，支持文件多选、input元素和文件对象 => input.files | input | file
uploader.add(input_or_file);
//批量添加上传任务 list => [input_or_file]
uploader.addList(list);
//手动开始上传（默认自动上传，实例化时可配置 ops.auto=false）
uploader.start();
//上传一个任务
uploader.upload(task);
//取消上传任务
//onlyCancel: 若为true,则仅取消上传而不触发任务完成事件
uploader.cancel(taskId, onlyCancel);
//移除上传任务，会先调用 uploader.cancel(taskId)
uploader.remove(taskId);
//更新上传进度
//total ： 总上传数据(byte)
//loaded ： 已上传数据(byte)
uploader.progress(task, total, loaded);
可以在初始化时指定UI处理函数，亦可以通过扩展的方式实现
Uploader.extend({
//初始化操作，一般无需处理
init: function () { },
//绘制任务界面
draw: function (task) {
//每个task就是一个上传任务，task一般有以下属性
/*task = {
id, //任务编号
name, //上传文件名（包括扩展名）
ext, //上传文件扩展名
size, //上传文件大小（单位：Byte，若获取不到大小，则值为-1）
input, //上传控件
file, //上传数据（仅 html5）
state, //上传状态
disabled, //若为true，表示禁止上传的文件
skip, //若为true，表示要跳过的任务
//分片上传
sliceCount, //分片总数
sliceIndex, //当前分片数
sliceStart, //当前分片上传的起始点
sliceEnd, //当前分片上传的结束点
//上传后会有如下属性（由于浏览器支持问题，以下部分属性可能不存在）
xhr, //XMLHttpRequest对象（仅 html5）
total, //总上传大小（单位：Byte）
loaded, //已上传大小（单位：Byte）
speed, //上传速度（单位：Byte/s）
avgSpeed, //平均上传速度（仅上传完毕）
startTime, //开始上传的时间
endTime, //结束上传的时间（仅上传完毕）
timeHash, //文件hash所用时间（毫秒，仅当isMd5为true）
time, //上传所用时间（毫秒）
deleted, //若为true，表示已删除的文件
//文件成功上传
queryOK, //仅秒传成功时为true
response, //服务器返回的字符串
json //response解析后的JSON对象(仅当 dataType 为json)
};*/
},
//更新上传进度
update: function (task) {
},
//上传完毕，一般无需处理
over: function () { }
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent