Skip to content
This repository was archived by the owner on Sep 27, 2024. It is now read-only.

Commit 381ca12

Browse files
committed
更新说明
Signed-off-by: Devin <devin87@qq.com>
1 parent 781004d commit 381ca12

File tree

1 file changed

+41
-11
lines changed

1 file changed

+41
-11
lines changed

README.md

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
web-uploader
22
============
33

4-
js (html5 + html4) 文件上传管理器,支持上传进度显示,支持图片预览+缩放,支持 IE6+、Firefox、Chrome等[博客园详细介绍](http://www.cnblogs.com/devin87/p/web-uploader.html)
4+
js (html5 + html4) 文件上传管理器,支持上传进度显示,支持秒传+分片上传+断点续传,支持图片预览+缩放,支持 IE6+、Firefox、Chrome等
55

66
###特点:
77
<ul>
88
<li>轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB</li>
99
<li>纯JS代码,无需Flash,无需更改后台代码即可实现带进度条(IE10+、其它标准浏览器)的上传,其它(eg:IE6+)自动降级为传统方式上传</li>
1010
<li>单独的图片上传UI,支持图片预览(IE6+、其它浏览器)和缩放(IE10+、其它浏览器)</li>
11-
<li>上传核心与UI界面分离,可以很方便的定制上传界面包括上传按钮</li>
11+
<li>支持秒传+分片上传+断点续传(IE10+、其它标准浏览器),适应多种上传环境(默认基于md5,不限于浏览器和使用场景,只要文件相同即可;也可自行实现hash计算)</li>
1212
<li>上传文件的同时可以指定上传参数,支持上传类型过滤</li>
1313
<li>完善的事件回调,可针对上传的每个过程进行单独处理</li>
14-
<li>方便的UI接口,上传界面可以随心所欲的定制</li>
14+
<li>上传核心与UI界面分离,方便的UI接口,可以很方便的定制上传界面包括上传按钮</li>
1515
</ul>
1616

1717
###演示环境(其它语言可自行实现服务端接收和网站部署)
1818
演示前请在根目录下创建upload文件夹,以保存上传文件<br>
1919
执行程序:app.js 上传处理:/upload
2020
```
2121
1. 执行演示程序前请确保已安装node环境(http://www.nodejs.org/download/)
22-
2. 命令行执行 node app.js ,windows 环境可双击运行 start.bat 来快速启动程序
23-
3. 打开浏览器访问 http://127.0.0.1:3000/
22+
2. 安装依赖,windows 环境可双击运行 install.bat
23+
3. 命令行执行 node app.js ,windows 环境可双击运行 start.bat 来快速启动程序
24+
4. 打开浏览器访问 http://127.0.0.1:3000/
2425
2526
```
2627

@@ -108,6 +109,14 @@ new Q.Uploader({
108109
allows: "", //允许上传的文件类型(扩展名),多个之间用逗号隔开
109110
disallows: "", //禁止上传的文件类型(扩展名)
110111
112+
//秒传+分片上传+断点续传,具体见示例(demo/slice.html)
113+
isSlice: false, //是否启用分片上传,若为true,则isQueryState和isMd5默认为true
114+
chunkSize: 2 * 1024 * 1024, //默认分片大小为2MB
115+
//查询路径为: url?action=query&hash=file hash
116+
isQueryState:false, //是否查询文件状态(for 秒传或续传)
117+
isMd5: false, //是否计算上传文件md5值
118+
isUploadAfterHash:true, //是否在Hash计算完毕后再上传
119+
111120
container:element, //一般无需指定
112121
getPos:function, //一般无需指定
113122
@@ -118,6 +127,8 @@ new Q.Uploader({
118127
select, //点击上传按钮准备选择上传文件之前触发,返回false可禁止选择文件
119128
add, //添加任务之前触发,返回false将跳过该任务
120129
upload, //上传任务之前触发,返回false将跳过该任务
130+
hashProgress, //文件hash进度(仅isMd5为true时有效)
131+
hash, //查询状态之前触发(for 秒传或续传)
121132
send, //发送数据之前触发,返回false将跳过该任务
122133
123134
cancel, //取消上传任务后触发
@@ -137,15 +148,23 @@ new Q.Uploader({
137148
});
138149
```
139150

140-
说明:回调事件(add、upload、send)支持异步调用,只需在后面加上Async即可,比如在上传之前需要访问服务器验证数据,通过的就上传,否则跳过
151+
说明:回调事件(add、upload、hash、send)支持异步调用,只需在后面加上Async即可,比如在上传之前需要访问服务器验证数据,通过的就上传,否则跳过
141152
```
142153
on: {
143-
uploadAsync: function (callback) {
154+
uploadAsync: function (task, callback) {
144155
$.postJSON(url, function (json) {
145156
//若 json.ok 返回false,该任务不会上传
146157
callback(json.ok);
147158
});
148-
}
159+
},
160+
//计算文件hash
161+
hashAsync: function(task, callback){
162+
Q.md5File(task.file, function(md5){
163+
//task.hash:秒传或断点续传唯一标识
164+
task.hash = md5;
165+
callback();
166+
});
167+
},
149168
}
150169
```
151170

@@ -154,6 +173,12 @@ on: {
154173
```
155174
var uploader = new Q.Uploader(ops);
156175
176+
//上传任务列表,数组
177+
uploader.list
178+
179+
//当前上传任务索引 => var task = uploader.list[uploader.index];
180+
uploader.index
181+
157182
//添加上传任务,支持文件多选、input元素和文件对象 => input.files | input | file
158183
uploader.add(input_or_file);
159184
@@ -167,7 +192,8 @@ uploader.start();
167192
uploader.upload(task);
168193
169194
//取消上传任务
170-
uploader.cancel(taskId);
195+
//onlyCancel: 若为true,则仅取消上传而不触发任务完成事件
196+
uploader.cancel(taskId, onlyCancel);
171197
172198
//移除上传任务,会先调用 uploader.cancel(taskId)
173199
uploader.remove(taskId);
@@ -213,12 +239,16 @@ Uploader.extend({
213239
214240
avgSpeed, //平均上传速度(仅上传完毕)
215241
216-
timeStart, //开始上传的时间
217-
timeEnd, //结束上传的时间(仅上传完毕)
242+
startTime, //开始上传的时间
243+
endTime, //结束上传的时间(仅上传完毕)
244+
245+
timeHash, //文件hash所用时间(毫秒,仅当isMd5为true)
246+
time, //上传所用时间(毫秒)
218247
219248
deleted, //若为true,表示已删除的文件
220249
221250
//文件成功上传
251+
queryOK, //仅秒传成功时为true
222252
response, //服务器返回的字符串
223253
json //response解析后的JSON对象(仅当 dataType 为json)
224254
};*/

0 commit comments

Comments
 (0)