From f010a828d9ee9cd19da0fae31d9c69050c5a293a Mon Sep 17 00:00:00 2001 From: leeight Date: Sun, 31 May 2015 16:50:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=20dnd=20=E7=9A=84=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/browser/demo/index.html | 2 +- test/browser/demo/src/config.js | 24 ++++++ test/browser/demo/src/dnd.js | 22 ++++++ test/browser/demo/src/file-list.js | 42 ++++++----- test/browser/demo/src/helper.js | 30 +++----- test/browser/demo/src/task.js | 52 +++++++++++++ test/browser/demo/src/task_manager.js | 103 ++++++++++++++++++++++++++ test/browser/demo/src/uploader.js | 5 +- 8 files changed, 239 insertions(+), 41 deletions(-) create mode 100644 test/browser/demo/src/task.js create mode 100644 test/browser/demo/src/task_manager.js diff --git a/test/browser/demo/index.html b/test/browser/demo/index.html index 2a49ad2..70bfaf8 100644 --- a/test/browser/demo/index.html +++ b/test/browser/demo/index.html @@ -45,7 +45,7 @@ 耗时：0s -
+
高级参数配置[+] diff --git a/test/browser/demo/src/config.js b/test/browser/demo/src/config.js index bac75d8..4194603 100644 --- a/test/browser/demo/src/config.js +++ b/test/browser/demo/src/config.js @@ -19,6 +19,30 @@ define(function (require) { var exports = {}; + // 分片上传的时候，并行的请求数目（带宽有限的情况下，太多了也没啥用） + exports.kParallel = 2; + + // 超过了 5M 就需要分片上传（这个不是 BOS 的限制，而是我自己定义的逻辑） + exports.kMinFileSize = 5 * 1024 * 1024; + + /** + * @return {{bucket:string, prefix:string}} + */ + exports.getOptions = function () { + var match = /#\/([^\/]+)((\/[^\/]+)+)?/.exec(location.hash); + var bucketName = match ? match[1] : null; + var prefix = (match ? match[2] : '') || ''; + + if (prefix && prefix[0] === '/') { + prefix = prefix.substr(1); + } + if (prefix && !/\/$/.test(prefix)) { + prefix = prefix + '/'; + } + + return {bucketName: bucketName, prefix: prefix}; + }; + exports.get = function () { var config = { bos: { diff --git a/test/browser/demo/src/dnd.js b/test/browser/demo/src/dnd.js index 1e8d44b..8aa373a 100644 --- a/test/browser/demo/src/dnd.js +++ b/test/browser/demo/src/dnd.js @@ -16,6 +16,18 @@ define(function (require) { var $ = require('jquery'); var u = require('underscore'); + var async = require('async'); + + var config = require('./config'); + var Klient = require('./client'); + var fileList = require('./file-list'); + var TaskManager = require('./task_manager'); + var Task = require('./task'); + + /** + * @type {TaskManager} + */ + var gTM = null; function onDragOver(e) { e.preventDefault(); @@ -29,6 +41,11 @@ define(function (require) { function onDropFiles(e) { e.preventDefault(); + gTM = new TaskManager(); + gTM.startup().then(function () { + console.log('gTM.done'); + }); + u.each(e.originalEvent.dataTransfer.items, function (item) { var entry = item.webkitGetAsEntry(); if (entry) { @@ -44,6 +61,11 @@ define(function (require) { if (entry.isFile) { entry.file(function (file) { console.log('File: ', path + file.name); + + var options = config.getOptions(); + var bucketName = options.bucketName; + var key = options.prefix + path + file.name; + gTM.addTask(new Task(bucketName, key, file, options)); }); } else if (entry.isDirectory) { diff --git a/test/browser/demo/src/file-list.js b/test/browser/demo/src/file-list.js index c600f90..a6557af 100644 --- a/test/browser/demo/src/file-list.js +++ b/test/browser/demo/src/file-list.js @@ -22,6 +22,7 @@ define(function (require) { var etpl = require('etpl'); var u = require('underscore'); + var config = require('./config'); var Klient = require('./client'); var kPageCount = 10; @@ -32,34 +33,27 @@ define(function (require) { $('.file-list tbody').html(html); } - function getListObjectsOptions() { - var match = /#\/([^\/]+)((\/[^\/]+)+)?/.exec(location.hash); - var bucketName = match ? match[1] : null; - var prefix = (match ? match[2] : '') || ''; - - if (prefix && prefix[0] === '/') { - prefix = prefix.substr(1); - } - if (prefix && !/\/$/.test(prefix)) { - prefix = prefix + '/'; - } - - var options = { + function getOptions() { + var options = u.extend({ maxKeys: kPageCount, marker: '', - delimiter: '/', - prefix: prefix, - bucketName: bucketName - }; + delimiter: '/' + }, config.getOptions()); return options; } + var working = false; function loadDirectory() { + if (working) { + return; + } + working = true; + var client = Klient.createInstance(); if (location.hash.length > 2) { // listObjects - var options = getListObjectsOptions(); + var options = getOptions(); var bucketName = options.bucketName; delete options.bucketName; if (bucketName) { @@ -71,6 +65,9 @@ define(function (require) { button.parents('tfoot').show(); button.data('next-marker', res.body.nextMarker); } + }) + .fin(function () { + working = false; }); return; } @@ -85,6 +82,9 @@ define(function (require) { item.is_dir = true; }); renderBody('TPL_list_buckets', {rows: buckets}); + }) + .fin(function () { + working = false; }); } @@ -94,7 +94,7 @@ define(function (require) { var nextMarker = button.data('next-marker'); // listObjects - var options = getListObjectsOptions(); + var options = getOptions(); var bucketName = options.bucketName; delete options.bucketName; options.marker = nextMarker; @@ -131,6 +131,10 @@ define(function (require) { }); } + exports.refresh = function () { + loadDirectory(); + }; + exports.init = function () { loadDirectory(); $(window).on('hashchange', loadDirectory); diff --git a/test/browser/demo/src/helper.js b/test/browser/demo/src/helper.js index d8773fb..5176b14 100644 --- a/test/browser/demo/src/helper.js +++ b/test/browser/demo/src/helper.js @@ -14,17 +14,12 @@ define(function (require) { var exports = {}; - // 超过了 5M 就需要分片上传（这个不是 BOS 的限制，而是我自己定义的逻辑） - var kMinFileSize = 5 * 1024 * 1024; - - // 分片上传的时候，并行的请求数目（带宽有限的情况下，太多了也没啥用） - var kParallel = 2; - var sdk = require('baidubce-sdk'); var u = require('underscore'); var async = require('async'); var Klient = require('./client'); + var config = require('./config'); function uploadSingleFile(client, bucketName, key, blob, options) { var ext = key.split(/\./g).pop(); @@ -42,7 +37,7 @@ define(function (require) { function getTasks(file, uploadId, bucketName, key) { var leftSize = file.size; - var minPartSize = kMinFileSize; + var minPartSize = config.kMinFileSize; var offset = 0; var partNumber = 1; @@ -115,7 +110,7 @@ define(function (require) { loaded: 0, total: tasks.length }; - async.mapLimit(tasks, kParallel, uploadPartFile(state, client), function (err, results) { + async.mapLimit(tasks, config.kParallel, uploadPartFile(state, client), function (err, results) { if (err) { deferred.reject(err); } @@ -142,19 +137,18 @@ define(function (require) { options = options || {}; var client = opt_client || Klient.createInstance(); - if (blob.size > kMinFileSize) { + if (blob.size > config.kMinFileSize) { return uploadSuperFile(client, bucketName, key, blob, options); } - else { - client.on('progress', function (evt) { - client.emit('bosprogress', { - lengthComputable: evt.lengthComputable, - loaded: evt.loaded, - total: evt.total - }); + + client.on('progress', function (evt) { + client.emit('bosprogress', { + lengthComputable: evt.lengthComputable, + loaded: evt.loaded, + total: evt.total }); - return uploadSingleFile(client, bucketName, key, blob, options); - } + }); + return uploadSingleFile(client, bucketName, key, blob, options); }; return exports; diff --git a/test/browser/demo/src/task.js b/test/browser/demo/src/task.js new file mode 100644 index 0000000..ca9d3dc --- /dev/null +++ b/test/browser/demo/src/task.js @@ -0,0 +1,52 @@ +/** + * Copyright (c) 2014 Baidu.com, Inc. All Rights Reserved + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on + * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + */ + +define(function (require) { + var helper = require('./helper'); + + /** + * @constructor + * @param {string} bucketName The bucket name. + * @param {string} key The object name. + * @param {Blob} blob 需要上传的文件内容. + * @param {Object=} options 上传文件的参数. + * @param {sdk.BosClient=} client The bos client. + */ + function Task(bucketName, key, blob, options, client) { + this.bucketName = bucketName; + this.key = key; + this.blob = blob; + this.options = options; + this.client = client; + } + + /** + * @return {sdk.Q.promise} + */ + Task.prototype.run = function () { + return helper.upload(this.bucketName, this.key, this.blob, this.options, this.client); + }; + + return Task; +}); + + + + + + + + + + +/* vim: set ts=4 sw=4 sts=4 tw=120: */ diff --git a/test/browser/demo/src/task_manager.js b/test/browser/demo/src/task_manager.js new file mode 100644 index 0000000..db78853 --- /dev/null +++ b/test/browser/demo/src/task_manager.js @@ -0,0 +1,103 @@ +/** + * Copyright (c) 2014 Baidu.com, Inc. All Rights Reserved + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on + * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the + * specific language governing permissions and limitations under the License. + */ + +define(function (require) { + var u = require('underscore'); + var sdk = require('baidubce-sdk'); + + var config = require('./config'); + + /** + * 上传文件夹的时候，文件的列表是异步获取的，无法直接使用 async 的接口 + * @constructor + */ + function TaskManager() { + /** + * 最多可以同时运行的任务数目. + * @type {number} + */ + this.parallel = config.kParallel; + + /** + * @type {number} + * 当前运行的任务数目 + */ + this.running = 0; + + /** + * FIFO + * @type {Array.} + */ + this.tasks = []; + + this.deferred = sdk.Q.defer(); + } + + /** + * @param {Task} task 需要执行的任务. + */ + TaskManager.prototype.addTask = function (task) { + this.tasks.push(task); + this.runNext(); + }; + + TaskManager.prototype.runNext = function () { + if (this.running >= this.parallel) { + return; + } + + if (this.tasks.length <= 0) { + this.deferred.resolve(); + return; + } + + // FIFO + var task = this.tasks.shift(); + if (task && typeof task.run === 'function') { + this.running ++; + task.run() + .done(u.bind(this.runTaskSuccess, this)) + .catch(u.bind(this.runTaskFailure, this)); + } + }; + + TaskManager.prototype.runTaskFailure = function (err) { + this.deferred.reject(err); + }; + + TaskManager.prototype.runTaskSuccess = function () { + this.running--; + this.runNext(); + }; + + /** + * 开始执行 this.tasks 里面的任务. + * @return {sdk.Q.promise} + */ + TaskManager.prototype.startup = function () { + return this.deferred.promise; + }; + + return TaskManager; +}); + + + + + + + + + + +/* vim: set ts=4 sw=4 sts=4 tw=120: */ diff --git a/test/browser/demo/src/uploader.js b/test/browser/demo/src/uploader.js index efa3ea9..b5e3b01 100644 --- a/test/browser/demo/src/uploader.js +++ b/test/browser/demo/src/uploader.js @@ -5,11 +5,11 @@ define(function (require) { var $ = require('jquery'); - var sdk = require('baidubce-sdk'); var async = require('async'); var Klient = require('./client'); var helper = require('./helper'); + var config = require('./config'); var exports = {}; @@ -33,8 +33,7 @@ define(function (require) { } function upload(file, callback) { - var partSize = 5 * 1024 * 1024; - var chunkCount = Math.ceil(file.size * 1.0 / partSize); + var chunkCount = Math.ceil(file.size * 1.0 / config.kMinFileSize); $('#g_file_size').val(file.size); $('#g_chunk_count').val(chunkCount);
Host (CORS上线之前暂时不支持修改Host)