经常做系统的时候会遇到上传组件，特别是大文件的时候总是很郁闷，长时间无响应导致糟糕的用户体验，所以决定采用swfupload来支持文件上传。
大体代码如下。
var upload = {};
upload.UploadPanel = function (cfg) {
this.iconCls = 'add';
this.text = 'upload';
Ext.apply(this, cfg);
this.setting = {
upload_url: this.uploadUrl,
flash_url: this.flashUrl || '../../../../Scripts/Platform/Upload/swfupload.swf',
file_size_limit: this.fileSize || (1024 * 50),
file_post_name: this.filePostName,
file_types: this.fileTypes || "*.*",
file_types_description: "All Files",
file_upload_limit: "5",
//file_queue_limit : "10",
post_params: this.postParams || { savePath: 'upload\\' },
use_query_string: true,
debug: false,
button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
custom_settings: {
scope_handler: this
},
file_queued_handler: this.filequeuedhandler,
file_queue_error_handler: this.filequeueerrorhandler,
file_dialog_complete_handler: this.filedialogcomplete_handler,
upload_start_handler: this.uploadstarthandler,
upload_progress_handler: this.onUploadProgress,
upload_error_handler: this.uploaderrorhandler,
upload_success_handler: this.onUploadSuccess,
upload_complete_handler: this.uploadcompletehandler,
queue_complete_handler: this.queuecompletehandler
};
upload.UploadPanel.superclass.constructor.call(this, {
listeners: {
'afterrender': function (e) {
var em = e.btnEl.parent('em');
var placeHolderId = Ext.id();
em.setStyle({
position: 'relative',
display: 'block'
});
em.createChild({
tag: 'div',
id: placeHolderId
});
this.swfupload = new SWFUpload(Ext.apply(this.setting, {
button_width: em.getWidth(),
button_height: em.getHeight(),
button_placeholder_id: placeHolderId
}));
this.swfupload.uploadStopped = false;
Ext.get(this.swfupload.movieName).setStyle({
position: 'absolute',
top: 0,
left: -2
});
},
scope: this,
delay: 100
}
});
}
Ext.extend(upload.UploadPanel, Ext.Button, {
filequeuedhandler: function () {
this.startUpload();
},
filequeueerrorhandler: function () {
},
filedialogcomplete_handler: function () {
},
uploadstarthandler: function () {
},
onUploadProgress: function (file, bytesComplete, totalBytes) {
},
uploaderrorhandler: function () {
},
onUploadSuccess: function () {
},
uploadcompletehandler: function () {
},
queuecompletehandler: function () {
}
});
Ext.reg('btnupload', upload.UploadPanel);
于是调用的时候就很easy了。
new Ext.Window({
width: 650,
title: 'UPLOAD',
height: 300,
tbar: [
{ xtype: 'btnupload',
text: '上传',
fileSize: 1024 * 50,
uploadUrl: 'SaveFile',
filePostName: 'file',
fileTypes: '*.jpg;*.gif;*.png;*.jpeg',
postParams: { savePath: 'upload\\' },
onUploadSuccess: function (s, f) {
console.log(f);
},
onUploadProgress: function (file, bytesComplete, totalBytes) {
var percent = Math.ceil((bytesComplete / totalBytes) * 100);
percent = percent == 100 ? 100 : percent;
console.log(percent);
}
}],
items:
[
]
}).show();
这样需要上传的时候就很轻松了。