Skip to content

Commit bd321da

Browse files
SunLnSunLn
committed
Merge pull request #74 from SunLn/fix_single_bug
修复单个页面中多个上传进程共用同样配置的 bug
2 parents 645bde2 + 028b17e commit bd321da

File tree

9 files changed

+564
-20
lines changed

9 files changed

+564
-20
lines changed

‎README.md‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ qiniu-js-sdk
5555
* 初始化上传
5656
5757
```javascript
58-
58+
var Qiniu = new QiniuJsSDK();
5959
var uploader = Qiniu.uploader({
6060
runtimes: 'html5,flash,html4', //上传模式,依次退化
6161
browse_button: 'pickfiles', //上传选择的点选按钮，**必需**
@@ -132,6 +132,25 @@ qiniu-js-sdk
132132
// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
133133
134134
// uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
135+
136+
```
137+
138+
如果一个页面中有多个上传实例，可以如下操作
139+
```javascript
140+
var Qiniu = new QiniuJsSDK();
141+
var op1 = {
142+
key : val ,
143+
……
144+
};
145+
var uploader = Qiniu.uploader(op1);
146+
147+
var Qiniu2 = new QiniuJsSDK();
148+
var op2 = {
149+
key : val ,
150+
……
151+
};
152+
var uploader2 = Qiniu2.uploader(op2);
153+
135154
```
136155
137156
* 运行网站，通过点击`pickfiles`元素，选择文件后上传

‎demo/js/main.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66

77
$(function() {
8+
var Qiniu = new QiniuJsSDK();
89
var uploader = Qiniu.uploader({
910
runtimes: 'html5,flash,html4',
1011
browse_button: 'pickfiles',
@@ -58,17 +59,17 @@ $(function() {
5859
progress.setComplete(up, info);
5960
},
6061
'Error': function(up, err, errTip) {
61-
$('table').show();
62-
var progress = new FileProgress(err.file, 'fsUploadProgress');
63-
progress.setError();
64-
progress.setStatus(errTip);
65-
}
66-
// ,
67-
// 'Key': function(up, file) {
68-
// var key = "";
69-
// // do something with key
70-
// return key
71-
// }
62+
$('table').show();
63+
var progress = new FileProgress(err.file, 'fsUploadProgress');
64+
progress.setError();
65+
progress.setStatus(errTip);
66+
}
67+
// ,
68+
// 'Key': function(up, file) {
69+
// var key = "";
70+
// // do something with key
71+
// return key
72+
// }
7273
}
7374
});
7475

‎demo/js/multiple.js‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
/*global Qiniu */
2+
/*global plupload */
3+
/*global FileProgress */
4+
/*global hljs */
5+
6+
7+
$(function() {
8+
var Qiniu = new QiniuJsSDK();
9+
var uploader = Qiniu.uploader({
10+
runtimes: 'html5,flash,html4',
11+
browse_button: 'pickfiles',
12+
container: 'container',
13+
drop_element: 'container',
14+
max_file_size: '100mb',
15+
flash_swf_url: 'js/plupload/Moxie.swf',
16+
dragdrop: true,
17+
chunk_size: '4mb',
18+
uptoken_url: $('#uptoken_url').val(),
19+
domain: $('#domain').val(),
20+
auto_start: true,
21+
init: {
22+
'FilesAdded': function(up, files) {
23+
$('table').show();
24+
$('#success').hide();
25+
plupload.each(files, function(file) {
26+
var progress = new FileProgress(file, 'fsUploadProgress');
27+
progress.setStatus("等待...");
28+
});
29+
},
30+
'BeforeUpload': function(up, file) {
31+
var progress = new FileProgress(file, 'fsUploadProgress');
32+
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
33+
if (up.runtime === 'html5' && chunk_size) {
34+
progress.setChunkProgess(chunk_size);
35+
}
36+
},
37+
'UploadProgress': function(up, file) {
38+
var progress = new FileProgress(file, 'fsUploadProgress');
39+
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
40+
41+
progress.setProgress(file.percent + "%", file.speed, chunk_size);
42+
},
43+
'UploadComplete': function() {
44+
$('#success').show();
45+
},
46+
'FileUploaded': function(up, file, info) {
47+
var progress = new FileProgress(file, 'fsUploadProgress');
48+
progress.setComplete(up, info);
49+
},
50+
'Error': function(up, err, errTip) {
51+
$('table').show();
52+
var progress = new FileProgress(err.file, 'fsUploadProgress');
53+
progress.setError();
54+
progress.setStatus(errTip);
55+
}
56+
}
57+
});
58+
59+
uploader.bind('FileUploaded', function() {
60+
console.log('hello man,a file is uploaded');
61+
});
62+
63+
var Qiniu2 = new QiniuJsSDK();
64+
var uploader2 = Qiniu2.uploader({
65+
runtimes: 'html5,flash,html4',
66+
browse_button: 'pickfiles2',
67+
container: 'container2',
68+
drop_element: 'container2',
69+
max_file_size: '100mb',
70+
flash_swf_url: 'js/plupload/Moxie.swf',
71+
dragdrop: true,
72+
chunk_size: '4mb',
73+
uptoken_url: $('#uptoken_url').val(),
74+
domain: $('#domain').val(),
75+
auto_start: true,
76+
init: {
77+
'FilesAdded': function(up, files) {
78+
$('table').show();
79+
$('#success').hide();
80+
plupload.each(files, function(file) {
81+
var progress = new FileProgress(file, 'fsUploadProgress');
82+
progress.setStatus("等待...");
83+
});
84+
},
85+
'BeforeUpload': function(up, file) {
86+
var progress = new FileProgress(file, 'fsUploadProgress');
87+
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
88+
if (up.runtime === 'html5' && chunk_size) {
89+
progress.setChunkProgess(chunk_size);
90+
}
91+
},
92+
'UploadProgress': function(up, file) {
93+
var progress = new FileProgress(file, 'fsUploadProgress');
94+
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
95+
96+
progress.setProgress(file.percent + "%", file.speed, chunk_size);
97+
},
98+
'UploadComplete': function() {
99+
$('#success').show();
100+
},
101+
'FileUploaded': function(up, file, info) {
102+
var progress = new FileProgress(file, 'fsUploadProgress');
103+
progress.setComplete(up, info);
104+
},
105+
'Error': function(up, err, errTip) {
106+
$('table').show();
107+
var progress = new FileProgress(err.file, 'fsUploadProgress');
108+
progress.setError();
109+
progress.setStatus(errTip);
110+
}
111+
}
112+
});
113+
114+
uploader2.bind('FileUploaded', function() {
115+
console.log('hello man 2,a file is uploaded');
116+
});
117+
118+
$('#container').on(
119+
'dragenter',
120+
function(e) {
121+
e.preventDefault();
122+
$('#container').addClass('draging');
123+
e.stopPropagation();
124+
}
125+
).on('drop', function(e) {
126+
e.preventDefault();
127+
$('#container').removeClass('draging');
128+
e.stopPropagation();
129+
}).on('dragleave', function(e) {
130+
e.preventDefault();
131+
$('#container').removeClass('draging');
132+
e.stopPropagation();
133+
}).on('dragover', function(e) {
134+
e.preventDefault();
135+
$('#container').addClass('draging');
136+
e.stopPropagation();
137+
});
138+
139+
140+
141+
$('#show_code').on('click', function() {
142+
$('#myModal-code').modal();
143+
$('pre code').each(function(i, e) {
144+
hljs.highlightBlock(e);
145+
});
146+
});
147+
148+
149+
$('body').on('click', 'table button.btn', function() {
150+
$(this).parents('tr').next().toggle();
151+
});
152+
153+
154+
var getRotate = function(url) {
155+
if (!url) {
156+
return 0;
157+
}
158+
var arr = url.split('/');
159+
for (var i = 0, len = arr.length; i < len; i++) {
160+
if (arr[i] === 'rotate') {
161+
return parseInt(arr[i + 1], 10);
162+
}
163+
}
164+
return 0;
165+
};
166+
167+
$('#myModal-img .modal-body-footer').find('a').on('click', function() {
168+
var img = $('#myModal-img').find('.modal-body img');
169+
var key = img.data('key');
170+
var oldUrl = img.attr('src');
171+
var originHeight = parseInt(img.data('h'), 10);
172+
var fopArr = [];
173+
var rotate = getRotate(oldUrl);
174+
if (!$(this).hasClass('no-disable-click')) {
175+
$(this).addClass('disabled').siblings().removeClass('disabled');
176+
if ($(this).data('imagemogr') !== 'no-rotate') {
177+
fopArr.push({
178+
'fop': 'imageMogr2',
179+
'auto-orient': true,
180+
'strip': true,
181+
'rotate': rotate,
182+
'format': 'png'
183+
});
184+
}
185+
} else {
186+
$(this).siblings().removeClass('disabled');
187+
var imageMogr = $(this).data('imagemogr');
188+
if (imageMogr === 'left') {
189+
rotate = rotate - 90 < 0 ? rotate + 270 : rotate - 90;
190+
} else if (imageMogr === 'right') {
191+
rotate = rotate + 90 > 360 ? rotate - 270 : rotate + 90;
192+
}
193+
fopArr.push({
194+
'fop': 'imageMogr2',
195+
'auto-orient': true,
196+
'strip': true,
197+
'rotate': rotate,
198+
'format': 'png'
199+
});
200+
}
201+
202+
$('#myModal-img .modal-body-footer').find('a.disabled').each(function() {
203+
204+
var watermark = $(this).data('watermark');
205+
var imageView = $(this).data('imageview');
206+
var imageMogr = $(this).data('imagemogr');
207+
208+
if (watermark) {
209+
fopArr.push({
210+
fop: 'watermark',
211+
mode: 1,
212+
image: 'http://www.b1.qiniudn.com/images/logo-2.png',
213+
dissolve: 100,
214+
gravity: watermark,
215+
dx: 100,
216+
dy: 100
217+
});
218+
}
219+
220+
if (imageView) {
221+
var height;
222+
switch (imageView) {
223+
case 'large':
224+
height = originHeight;
225+
break;
226+
case 'middle':
227+
height = originHeight * 0.5;
228+
break;
229+
case 'small':
230+
height = originHeight * 0.1;
231+
break;
232+
default:
233+
height = originHeight;
234+
break;
235+
}
236+
fopArr.push({
237+
fop: 'imageView2',
238+
mode: 3,
239+
h: parseInt(height, 10),
240+
q: 100,
241+
format: 'png'
242+
});
243+
}
244+
245+
if (imageMogr === 'no-rotate') {
246+
fopArr.push({
247+
'fop': 'imageMogr2',
248+
'auto-orient': true,
249+
'strip': true,
250+
'rotate': 0,
251+
'format': 'png'
252+
});
253+
}
254+
});
255+
256+
var newUrl = Qiniu.pipeline(fopArr, key);
257+
258+
var newImg = new Image();
259+
img.attr('src', 'loading.gif');
260+
newImg.onload = function() {
261+
img.attr('src', newUrl);
262+
img.parent('a').attr('href', newUrl);
263+
};
264+
newImg.src = newUrl;
265+
return false;
266+
});
267+
268+
});

‎demo/js/qiniu.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*global plupload ,mOxie*/
22
/*global ActiveXObject */
3-
/*exported Qiniu */
3+
/*exported QiniuJsSDK */
44

55
function QiniuJsSDK() {
66

@@ -855,5 +855,3 @@ function QiniuJsSDK() {
855855
};
856856

857857
}
858-
859-
var Qiniu = new QiniuJsSDK();

‎demo/server.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,13 @@ app.get('/', function(req, res) {
6666
});
6767
});
6868

69+
app.get('/multiple', function(req, res) {
70+
res.render('multiple.html', {
71+
domain: config.Domain,
72+
uptoken_url: config.Uptoken_Url
73+
});
74+
});
75+
6976
qiniu.conf.ACCESS_KEY = config.ACCESS_KEY;
7077
qiniu.conf.SECRET_KEY = config.SECRET_KEY;
7178

‎demo/views/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ <h4 class="modal-title" id="myModalLabel">查看初始化代码</h4>
8686
<div class="modal-body">
8787
<pre><code>
8888
//引入Plupload 、qiniu.js后
89-
89+
var Qiniu = new QiniuJsSDK();
9090
var uploader = Qiniu.uploader({
9191
runtimes: 'html5,flash,html4', //上传模式,依次退化
9292
browse_button: 'pickfiles', //上传选择的点选按钮，**必需**

0 commit comments

Comments
 (0)