ext 3.x 让uploadPanel支持swfupload

经常做系统的时候会遇到上传组件，特别是大文件的时候总是很郁闷，长时间无响应导致糟糕的用户体验，所以决定采用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();

这样需要上传的时候就很轻松了。