關於Plupload
Plupload是一個web文件上傳組件，支持通過HTML5、Silverlight、Flash或者普通的form來上傳文件，提供了過濾文件類型、設置上傳文件大小、上傳進度、針對圖片的縮放上傳的特性，在使用上也非常簡單：
1: var uploader = new plupload.Uploader({
2: runtimes : 'html5,flash,silverlight,html4',
3: browse_button : 'pickfiles', // you can pass in id...
4: container: document.getElementById('container'), // ... or DOM Element itself
5: url : 'upload.php',
6: flash_swf_url : '../js/Moxie.swf',
7: silverlight_xap_url : '../js/Moxie.xap',
8:
9: filters : {
10: max_file_size : '10mb',
11: mime_types: [
12: {title : "Image files", extensions : "jpg,gif,png"},
13: {title : "Zip files", extensions : "zip"}
14: ]
15: },
16:
17: init: {
18: PostInit: function() {
19: document.getElementById('filelist').innerHTML = '';
20:
21: document.getElementById('uploadfiles').onclick = function() {
22: uploader.start();
23: return false;
24: };
25: },
26:
27: FilesAdded: function(up, files) {
28: plupload.each(files, function(file) {
29: document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
30: });
31: },
32:
33: UploadProgress: function(up, file) {
34: document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
35: },
36:
37: Error: function(up, err) {
38: document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
39: }
40: }
41: });
42:
43: uploader.init();
Plupload的開源協議采用的是GPLv2，同時也提供商業授權。
注意：目前Plupload的版本是2.0，而官方網站的文檔是老版本的，最新的文檔去Plupload的Github上看。
封裝Plupload
在Extjs中定義一個Plupload，方便其他地方使用：
1: Ext.define('Ext.ux.Plupload', {
2: constructor: function (config) {
3: var me = this;
4: var cfg = config || {};
5: if (!cfg.pluploadConfig) {
6: cfg.pluploadConfig = {};
7: }
8: else {
9: var tmp_cfg = cfg.pluploadConfig;
10: cfg.pluploadConfig = {};
11: Ext.Object.merge(cfg.pluploadConfig, tmp_cfg);
12: }
13: if (!cfg.pluploadConfig.runtimes) {
14: var runtimes = 'html5';
15: if (cfg.pluploadConfig.flash_swf_url) {
16: runtimes += ',flash';
17: }
18: if (cfg.pluploadConfig.silverlight_xap_url) {
19: runtimes += ',silverlight';
20: }
21: runtimes += ',html4';
22: cfg.pluploadConfig.runtimes = runtimes;
23: }
24: if (!cfg.pluploadConfig.filters) {
25: cfg.pluploadConfig.filters = {
26: max_file_size: '10mb'
27: }
28: }
29: else {
30: if (!cfg.pluploadConfig.filters.max_file_size) {
31: cfg.pluploadConfig.filters.max_file_size = '10mb';
32: }
33: }
34: cfg.pluploadConfig.browse_button = cfg.browseButton.getEl().dom.id;
35: me.uploader = new plupload.Uploader(cfg.pluploadConfig);
36: me.uploader.init();
37: }
38: });
使用上也非常簡單：
1: Ext.create('Ext.ux.Plupload', {
2: browseButton: btn,
3: pluploadConfig:{ ... }
4: });
btn就是要綁定上傳動作的Extjs的Button，pluploadConfig就是Plupload的配置參數。
擴展一個PluploadButton
上面簡單的使用方法需要btn已經渲染出來，同時如果btn被destroy需要同時把uploader也destroy掉，那就擴展一個Button:
1: Ext.define('Ext.ux.button.PluploadButton', {
2: extend: 'Ext.Button',
3: alias: ['widget.pluploadbutton'],
4: constructor: function (config) {
5: var me = this;
6: me.callParent(arguments);
7: me.on('render', function (btn, eOpts) {
8: btn.uploader = Ext.create('Ext.ux.Plupload', {
9: browseButton: btn,
10: pluploadConfig: eOpts.pluploadConfig
11: });
12: }, me, { pluploadConfig: config.pluploadConfig });
13: me.on('destroy', function (btn, eOpts) {
14: if (btn.uploader) {
15: btn.uploader.uploader.destroy();
16: }
17: })
18: }
19: });
現在直接使用pluploadbutton就可以了：
1: {
2: xtype: 'pluploadbutton',
3: text: '上傳圖片',
4: pluploadConfig: {
5: url: '/Images/Upload',
6: flash_swf_url: '/Scripts/plupload/js/Moxie.swf',
7: filters: {
8: mime_types: [
9: {
10: title: "圖片文件",
11: extensions: "jpg,gif,png"
12: }
13: ]
14: },
15: init: {
16: QueueChanged: function (up) {
17: //單文件上傳
18: up.start();
19: },
20: FileUploaded: function (up, files, response) {
21: var json = Ext.JSON.decode(response.response);
22: .........
23:
24: }
25: }
26: }
27: }
這個例子只要選擇了一個文件就開始上傳，你可以根據官方的文檔做一個Extjs的文件隊列，把文件選擇到隊列中，然后點擊上傳按鈕在統一上傳。