Skip to content

Commit ab8daf9

Browse files
devin87devin87
committed
1. 上传管理器可配置是否禁用 input.click() 触发文件选择框
2. 添加任务优化 3. 添加多个上传管理器demo和拖拽上传demo 4. 修复自定义上传demo界面bug 5. 细节改善 Signed-off-by: Devin <[email protected]>
1 parent 7577546 commit ab8daf9

18 files changed

+10780
-119
lines changed

Diff for: ‎README.md

+42-33
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ new Q.Uploader({
5252
//--------------- 可选 ---------------
5353
html5: true, //是否启用html5上传,若浏览器不支持,则自动禁用
5454
multiple: true, //选择文件时是否允许多选,若浏览器不支持,则自动禁用(仅html5模式有效)
55+
56+
clickTrigger:true, //是否启用click触发文件选择 eg: input.click() => ie9及以下不支持
57+
5558
auto: true, //添加任务后是否立即上传
5659
5760
data: {}, //上传文件的同时可以指定其它参数,该参数将以POST的方式提交到服务器
@@ -94,56 +97,62 @@ new Q.Uploader({
9497

9598
说明：回调事件(add、upload、send)支持异步调用，只需在后面加上Async即可，比如在上传之前需要访问服务器验证数据，通过的就上传，否则跳过
9699
```
97-
on:{
98-
uploadAsync:function(callback){
99-
$.postJSON(url,function(json){
100-
if(json.ok) callback();
101-
else callback(false); //指定false后，该任务不会上传
102-
});
103-
}
100+
on: {
101+
uploadAsync: function (callback) {
102+
$.postJSON(url, function (json) {
103+
//若 json.ok 返回false，该任务不会上传
104+
callback(json.ok);
105+
});
106+
}
104107
}
105108
```
106109

107110
###自定义UI实现
108111
可以在初始化时指定UI处理函数，亦可以通过扩展的方式实现
109112
```
110113
Uploader.extend({
111-
//初始化操作，一般无需处理
112-
init:function(){},
114+
//初始化操作，一般无需处理
115+
init: function () { },
116+
117+
//绘制任务界面
118+
draw: function (task) {
119+
//每个task就是一个上传任务，task一般有以下属性
120+
/*task = {
121+
id, //任务编号
122+
123+
name, //上传文件名（包括扩展名）
124+
ext, //上传文件扩展名
125+
size, //上传文件大小（单位：Byte，若获取不到大小，则值为-1）
113126
114-
//绘制任务界面
115-
draw:function(task){
116-
//每个task就是一个上传任务，task一般有以下属性
117-
/*task = {
118-
id, //任务编号
127+
input, //上传控件
128+
file, //上传数据（仅 html5）
119129
120-
name, //上传文件名（包括扩展名）
121-
ext, //上传文件扩展名
122-
size, //上传文件大小（单位：Byte，若获取不到大小，则值为-1）
130+
state, //上传状态
123131
124-
input, //上传控件
125-
file, //上传数据（for html5）
132+
disabled, //若为true，表示禁止上传的文件
126133
127-
state, //上传状态
134+
//上传后会有如下属性（部分属性需浏览器支持）
135+
xhr, //XMLHttpRequest对象（仅 html5）
128136
129-
//上传后会有如下属性（需浏览器支持）
130-
total, //总上传大小（单位：Byte）
131-
loaded, //已上传大小（单位：Byte）
132-
speed, //上传速度（单位：Byte/s）
137+
total, //总上传大小（单位：Byte）
138+
loaded, //已上传大小（单位：Byte）
139+
speed, //上传速度（单位：Byte/s）
133140
134141
avg_speed, //平均上传速度（需上传完毕）
135142
136143
timeStart, //开始上传的时间
137-
timeEnd //结束上传的时间（需上传完毕）
144+
timeEnd, //结束上传的时间（需上传完毕）
145+
146+
deleted //若为true，表示已删除的文件
138147
};*/
139-
},
148+
},
140149
141-
//更新上传进度
142-
update:function(task){
143-
144-
},
150+
//更新上传进度
151+
update: function (task) {
145152
146-
//上传完毕，一般无需处理
147-
over:function(){}
148-
})
153+
},
154+
155+
//上传完毕，一般无需处理
156+
over: function () { }
157+
});
149158
```

Diff for: ‎demo/Q.tabs.js

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/// <reference path="../js/Q.js" />
2+
/// <reference path="jquery-1.11.1.js" />
3+
/*
4+
* Q.tabs.js 选项卡插件
5+
* author:[email protected]
6+
* update:2014/09/23 11:15
7+
*/
8+
(function () {
9+
"use strict";
10+
11+
var isFunc = Q.isFunc,
12+
getFirst = Q.getFirst;
13+
14+
//设置选项卡切换
15+
function setTabs(ops) {
16+
ops = ops || {};
17+
18+
var context = ops.context,
19+
20+
list_li = $(".tabTitle>li", context),
21+
list_cont = $(".tabCont>.turn-box", context),
22+
23+
lastIndex;
24+
25+
if (list_li.size() <= 0) return;
26+
27+
var map_tab_index = {};
28+
29+
$.each(list_li, function (i, li) {
30+
//优先显示
31+
if ($(li).attr("x-def") == "1") ops.index = i;
32+
33+
var link = getFirst(li);
34+
if (!link) return;
35+
36+
var hash = link.href.split("#")[1];
37+
if (hash) map_tab_index[hash] = i;
38+
});
39+
40+
list_li.removeClass("on");
41+
list_cont.hide();
42+
43+
//切换操作
44+
var showTab = function (index) {
45+
if (index === lastIndex) return;
46+
47+
if (lastIndex !== undefined) {
48+
var lastTab = list_li[lastIndex],
49+
lastCont = list_cont[lastIndex];
50+
51+
$(lastTab).removeClass("on");
52+
$(lastCont).hide();
53+
}
54+
55+
var tab = list_li[index],
56+
cont = list_cont[index];
57+
58+
$(tab).addClass("on");
59+
$(cont).show();
60+
61+
lastIndex = index;
62+
63+
//回调函数(自定义切换事件)
64+
var callback = window.onTabChange;
65+
66+
if (isFunc(callback)) {
67+
setTimeout(function () {
68+
callback({ index: index, tab: tab, cont: cont });
69+
}, 100);
70+
}
71+
};
72+
73+
//点击切换事件
74+
list_li.each(function (i) {
75+
$(this).click(function () {
76+
showTab(i);
77+
});
78+
});
79+
80+
//初始化
81+
setTimeout(function () {
82+
var hash = location.hash.slice(1),
83+
index = map_tab_index[hash];
84+
85+
if (index == undefined) index = ops.index || 0;
86+
87+
//默认显示顺序 location hash -> html定义(x-def属性) -> ops.index -> 0
88+
showTab(index);
89+
}, 20);
90+
}
91+
92+
//------------------------- export -------------------------
93+
94+
Q.setTabs = setTabs;
95+
96+
})();

Diff for: ‎demo/bg-tab.png

222 Bytes
Loading

Diff for: ‎demo/custom.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@
55
<title>文件上传</title>
66
<link href="demo.css" rel="stylesheet" type="text/css" />
77
<style type="text/css">
8+
.upload-input { position: absolute; overflow: hidden; }
9+
.upload-html4 { position: absolute; left: -10000px; top: -10000px; }
10+
811
.u-loaded { color: green; }
912
.u-total { color: #FC5900; }
1013
</style>
1114
</head>
1215

1316
<body>
14-
<div class="header">Header</div>
17+
<div id="header" class="header">Header</div>
1518
<div class="main">
1619
<div id="sidebar" class="sidebar"></div>
1720
<div class="content">
@@ -37,10 +40,11 @@
3740
}
3841

3942
new Uploader({
40-
url: "/upload",
43+
url: UPLOAD_URL,
4144
target: document.getElementById("upload-target"),
4245

4346
multiple: false,
47+
//clickTrigger: false,
4448

4549
//自定义UI实现,无需导入 Q.Uploader.UI.js 和 uploader.css
4650
UI: {

Diff for: ‎demo/default.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99

1010
<body>
11-
<div class="header">Header</div>
11+
<div id="header" class="header">Header</div>
1212
<div class="main">
1313
<div id="sidebar" class="sidebar"></div>
1414
<div class="content">
@@ -34,7 +34,7 @@
3434
var Uploader = Q.Uploader;
3535

3636
var uploader = new Uploader({
37-
url: "../api/upload.ashx?type=file",
37+
url: UPLOAD_URL + "?type=file",
3838
target: document.getElementById("upload-target"),
3939
view: document.getElementById("upload-view"),
4040

Diff for: ‎demo/demo.css

+14-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ a { text-decoration: none; }
99
.header { height: 60px; line-height: 60px; font-size: 16px; text-align: center; border-bottom: 1px solid #ccc; }
1010
.main { overflow: hidden; }
1111

12-
.sidebar { float: left; width: 180px; height: 300px; border-right: 1px solid #ccc; margin-right: 15px; }
12+
.sidebar { float: left; width: 180px; border-right: 1px solid #ccc; margin-right: 15px; }
1313
.sidebar .title { font-size: 16px; padding: 8px 0 8px 15px; }
1414
.sidebar li { padding: 8px 0 8px 35px; border-top: 1px solid #ddd; }
1515
.sidebar li a { color: #0094ff; font-size: 14px; }
@@ -18,9 +18,7 @@ a { text-decoration: none; }
1818
.content { float: left; width: 790px; padding-top: 20px; }
1919
.x-button { padding: 10px 25px; border-radius: 3px; text-align: center; text-decoration: none; background-color: #0a82e4; color: #ffffff; font-size: 17px; margin: 0; white-space: nowrap; cursor: pointer; min-width: 60px; _width: 60px; }
2020

21-
.content a { margin-right: 5px; }
22-
23-
.content .x-button { display: inline-block; vertical-align: top; }
21+
.content .x-button { display: inline-block; vertical-align: top; margin-right: 5px; }
2422

2523
#upload-target { margin-bottom: 15px; }
2624
#upload-view { min-height: 200px; _height: 200px; background: #fff; border: 1px solid green; }
@@ -30,3 +28,15 @@ a { text-decoration: none; }
3028
.scroll-view { overflow: auto; height: 300px; }
3129
.h100 { height: 100px; }
3230
.h1000 { height: 1000px; }
31+
32+
.tabTitle { overflow: hidden; zoom: 1; }
33+
.tabTitle li { float: left; margin-right: 4px; z-index: 10; position: relative; }
34+
.tabTitle li a { float: left; padding: 0 18px; border: 1px solid #cdcdcd; border-bottom: none; line-height: 44px; font-size: 14px; color: #333; text-decoration: none; font-weight: bold; background: url(bg-tab.png) repeat-x left bottom; }
35+
.tabTitle li a:hover, .tabTitle li.on a { border-top: 2px solid #336699; line-height: 44px; background: #fff; }
36+
37+
.tabCont { margin-top: -1px; padding: 10px; border: 1px solid #cdcdcd; background: #fff; }
38+
39+
.turn-box { min-height: 200px; _height: 200px; }
40+
.turn-box .x-button { margin: 10px; }
41+
42+
#drop-area { width: 400px; height: 200px; line-height: 200px; text-align: center; font-size: 18px; color: #777; border: 1px solid red; margin: 10px 0; }

Diff for: ‎demo/demo.js

+24-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
(function () {
1+
//devin87@qq.com
2+
(function () {
3+
"use strict";
4+
25
//获取页名称
36
function get_page_name(pathname) {
47
pathname = pathname || location.pathname;
@@ -18,9 +21,13 @@
1821
{ title: "html4+滚动区域", href: "scroll-view.html" },
1922
{ title: "文件单选", href: "simple-single.html" },
2023
{ title: "手动上传", href: "simple-not-auto.html" },
21-
{ title: "自定义上传", href: "custom.html" }
24+
{ title: "多个上传管理器", href: "tabs.html" },
25+
{ title: "拖拽上传", href: "drag-drop.html" },
26+
{ title: "自定义UI", href: "custom.html" }
2227
];
2328

29+
var map_page = {};
30+
2431
function draw_sidebar() {
2532
var html = [];
2633
html.push('<div class="title">导航</div>');
@@ -29,6 +36,9 @@
2936
var item = list_page[i],
3037
href = item.href;
3138

39+
item.index = i;
40+
map_page[href] = item;
41+
3242
html.push('<li' + (href == PAGE_NAME ? ' class="on"' : '') + '><a href="' + item.href + '">' + item.title + '</a></li>');
3343
}
3444
html.push('</ul>');
@@ -38,7 +48,19 @@
3848

3949
function init() {
4050
draw_sidebar();
51+
52+
var boxHeader = document.getElementById("header"),
53+
page = map_page[PAGE_NAME];
54+
55+
if (!boxHeader || !page) return;
56+
57+
if (boxHeader.innerHTML == "Header") boxHeader.innerHTML = page.title;
4158
}
4259

4360
init();
61+
62+
//------------------- export -------------------
63+
64+
window.UPLOAD_URL = "../api/upload.ashx";
65+
4466
})();

0 commit comments

Comments
 (0)