11web-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```
21211. 执行演示程序前请确保已安装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```
142153on: {
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```
155174var 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
158183uploader.add(input_or_file);
159184
@@ -167,7 +192,8 @@ uploader.start();
167192uploader.upload(task);
168193
169194//取消上传任务
170- uploader.cancel(taskId);
195+ //onlyCancel: 若为true,则仅取消上传而不触发任务完成事件
196+ uploader.cancel(taskId, onlyCancel);
171197
172198//移除上传任务,会先调用 uploader.cancel(taskId)
173199uploader.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