Skip to content

Commit ec55bea

Browse files
greatghoulgreatghoul
committed
implement upload file and response url.
1 parent c9cb862 commit ec55bea

9 files changed

Lines changed: 210 additions & 51 deletions

File tree

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
/node_modules
2-
/demo

‎demo/application.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
$(function() {
2+
DeepUploader.register({
3+
name: 'image',
4+
uploader: 'qiniu',
5+
uptokenUrl: 'http://jssdk.demo.qiniu.io/uptoken',
6+
bucket: 'qiniu-plupload',
7+
domain: 'http://qiniu-plupload.qiniudn.com/',
8+
accept: 'image/*'
9+
});
10+
11+
$(document).on('click', '.test', DeepUploader.browseHandler);
12+
13+
$(document).on('FileAdded', '.test1', function(event) {
14+
console.log('test1', event.originalEvent.detail);
15+
});
16+
17+
$(document).on('FileAdded', '.test', function(event) {
18+
console.log('.test', event.originalEvent.detail);
19+
});
20+
21+
$(document).on('FileUploaded', '.test', function(event) {
22+
console.log('.test', event.originalEvent.detail);
23+
24+
var $image = $('<img />');
25+
$image.attr('src', event.originalEvent.detail.response.url);
26+
$image.appendTo('body');
27+
});
28+
29+
$(document).on('FileAdded', function(event) {
30+
console.log('document', event.originalEvent.detail);
31+
});
32+
});

‎demo/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
<button class="test" data-uploader-profile="image">触发上传</button>
9+
<button class="test1">触发上传</button>
10+
<script src="jquery.min.js"></script>
11+
<script src="../dist/deep_uploader.js"></script>
12+
<script src="application.js"></script>
13+
</body>
14+
</html>

‎demo/jquery.min.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/deep_uploader.js‎

Lines changed: 82 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -219,39 +219,73 @@ var BaseUploader = (function () {
219219
}, {
220220
key: 'start',
221221
value: function start() {
222-
this.xhr = new XMLHttpRequest();
223-
this.xhr.open('POST', this.profile.uploadUrl, true);
222+
var self = this;
224223

225-
this.onBeforeUpload();
224+
self.xhr = new XMLHttpRequest();
225+
self.xhr.open('POST', self.profile.uploadUrl, true);
226+
227+
this.onBeforeUpload(function () {
228+
_event_trigger2['default'].trigger(self.element, 'BeforeUpload', self._detail());
229+
230+
self.upload(function () {
231+
_event_trigger2['default'].trigger(self.element, 'FileUpload', self._detail());
232+
});
233+
});
226234
}
227235
}, {
228-
key: 'upload',
229-
value: function upload() {
230-
_event_trigger2['default'].trigger(this.element, 'FileUpload', this._detail());
231-
console.log('File upload:', this.file);
236+
key: 'onBeforeUpload',
237+
value: function onBeforeUpload(callback) {
238+
this.formData = new FormData();
239+
this.formData.append('file', this.file);
240+
this.formData.append('name', this.file.name);
241+
this.formData.append('key', this.file.name);
242+
243+
callback();
232244
}
233245
}, {
234-
key: 'cancel',
235-
value: function cancel() {}
236-
}, {
237-
key: 'onBeforeUpload',
238-
value: function onBeforeUpload() {
239-
_event_trigger2['default'].trigger(this.element, 'BeforeUpload', this._detail());
246+
key: 'upload',
247+
value: function upload(callback) {
248+
var self = this;
249+
250+
self.xhr.onload = function () {
251+
if (self.xhr.status === 200) {
252+
var data = JSON.parse(self.xhr.responseText);
253+
self.onFileUploaded(data, function () {
254+
var detail = self._detail();
255+
detail.response = self.response;
256+
257+
_event_trigger2['default'].trigger(self.element, 'FileUploaded', detail);
258+
});
259+
} else {
260+
self.onFileError(self.xhr.status, self.xhr.responseText);
261+
}
262+
};
263+
self.xhr.send(self.formData);
240264

241-
this.upload();
265+
callback();
242266
}
243267
}, {
244-
key: 'onFileUpload',
245-
value: function onFileUpload() {}
268+
key: 'cancel',
269+
value: function cancel() {}
246270
}, {
247271
key: 'onFileProgress',
248272
value: function onFileProgress() {}
249273
}, {
250274
key: 'onFileUploaded',
251-
value: function onFileUploaded() {}
275+
value: function onFileUploaded(data, callback) {
276+
this.response = data;
277+
278+
callback();
279+
}
252280
}, {
253281
key: 'onFileError',
254-
value: function onFileError() {}
282+
value: function onFileError(status, response) {
283+
var detail = this._detail();
284+
detail.responseStatus = status;
285+
detail.responseText = response;
286+
287+
_event_trigger2['default'].trigger(this.element, 'FileError', detail);
288+
}
255289
}]);
256290

257291
return BaseUploader;
@@ -262,6 +296,7 @@ module.exports = exports['default'];
262296

263297
},{"../event_trigger":2}],6:[function(require,module,exports){
264298
// http://developer.qiniu.com/docs/v6/api/overview/up/form-upload.html
299+
// http://jssdk.demo.qiniu.io/
265300

266301
'use strict';
267302

@@ -297,27 +332,47 @@ var QiniuUploader = (function (_BaseUploader) {
297332
}
298333
}
299334

300-
_createClass(QiniuUploader, [{
301-
key: 'start',
302-
value: function start() {
303-
var _this2 = this;
304-
305-
var _this = this;
335+
// Fetch upload token from profile.uptokenUrl
306336

337+
_createClass(QiniuUploader, [{
338+
key: '_fetchUploadToken',
339+
value: function _fetchUploadToken(callback) {
340+
var self = this;
307341
var request = new XMLHttpRequest();
342+
308343
request.open('GET', this.profile.uptokenUrl, true);
309344
request.onload = function () {
310345
if (request.status === 200) {
311346
var data = JSON.parse(request.responseText);
312-
_this.uptoken = data.uptoken;
313-
console.log('Uptoken:', _this.uptoken);
347+
self.formData.append('token', data.uptoken);
314348

315-
_get(Object.getPrototypeOf(QiniuUploader.prototype), 'start', _this2).call(_this2);
349+
callback();
316350
}
317351
};
318352

319353
request.send();
320354
}
355+
}, {
356+
key: 'onBeforeUpload',
357+
value: function onBeforeUpload(callback) {
358+
self = this;
359+
360+
_get(Object.getPrototypeOf(QiniuUploader.prototype), 'onBeforeUpload', this).call(this, function () {
361+
self._fetchUploadToken(callback);
362+
});
363+
}
364+
}, {
365+
key: 'onFileUploaded',
366+
value: function onFileUploaded(data, callback) {
367+
var self = this;
368+
369+
_get(Object.getPrototypeOf(QiniuUploader.prototype), 'onFileUploaded', this).call(this, data, function () {
370+
var filename = encodeURIComponent(self.response.key);
371+
self.response.url = self.profile.domain + filename;
372+
373+
callback();
374+
});
375+
}
321376
}]);
322377

323378
return QiniuUploader;

‎dist/deep_uploader.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)