前端界面extjs整合webuploader

1.上传文件按钮代码

'<div id="uploader">' +
    '<div id="thelist" class="uploader-list"></div>' +
    '<div class="btns">' +
           ' <div id="picker">选择...</div>'+
     '</div>'+
 '</div>'

2.css

 #picker 
 {
     display: inline-block;
     line-height: 1.428571429;
     vertical-align: middle;
     margin: 0 12px 0 5px;
 }
 #picker div:nth-child(2){width:100%!important;height:100%!important;} 
 #picker .webuploader-pick 
 {
     padding: 4px 12px;
     display: block;
     background-color: #5fa2dd;
 }

3.WebUploader 处理逻辑

 var this = me;
 this.uploader = WebUploader.create({
    // swf文件路径
    //swf: '',
    // 文件接收服务端。
    server: '',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',
    //禁用拖拽上传
    disableGlobalDnd: true,
    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false,
    //分片
    chunked: true,
    //每片大小
    chunkSize: 2*1024*1024,
    //单片失败后重试次数
    chunkRetry: 0,
    //上传并发线程数
    threads: 1,
    //可上传文件数量
    fileNumLimit: 1,
    //可重复上传
    duplicate: true
});
this.uploader.on('beforeFileQueued', function (file) 
{
   if(me.uploader.getFiles().length)
   {
        me.uploader.removeFile(me.uploader.getFiles()[0],true);
   }
});
// 当有文件被添加进队列的时候
this.uploader.on('fileQueued', function (file) 
{
   me.fileNameCtl.setValue(file.name);
});

// 文件上传过程中创建进度条实时显示。
this.uploader.on('uploadProgress', function (file, percentage) 
{
    if(!me.progressBar || me.progressBar.isHidden())
    {
        me.progressBar=Ext.Msg.show({
            title: '提示信息',
            closable: false,
            msg: '加载中',
            progress:true,
            width:300
        });
    }
    percentage =  percentage.toFixed(2);
    me.progressBar.updateProgress(percentage,(percentage*100).toFixed(0) + '%');
});
this.uploader.on('uploadAccept', function (block, ret, fn) 
{
     if(!ret.success)
     {
        me.errorRespnse = ret;
        return false;
     }
});

this.uploader.on('uploadSuccess', function (file, response) 
{
    if (response.success) 
    {
        me.progressBar.msg.update(Lang.Common.uploadSucess);
        me.suceesFlag = true;
    }
});
this.uploader.on('uploadError', function (file) 
{
    me.progressBar.msg.update(Lang.Common.uploadFail);
    if(me.errorRespnse) return;
    me.fileNameCtl.setValue('');
    me.uploader.reset();
});

this.uploader.on('uploadComplete', function (file) 
{
    Utils.delayCall(function()
    {
        me.btnOK.setDisabled(false);
        me.progressBar.hide();
        if(me.errorRespnse)
        {
            Ext.MessageBox.alert('错误信息', Ext.String.format('操作失败，{0}：{1}', me.errorRespnse.errorCode, Lang.Error[me.errorRespnse.errorCode]+(me.errorRespnse.errorMsg || '')), function()
            {
                me.errorRespnse = null;
            }, me);
            return;
        }
        else if(me.suceesFlag)
        {    
            me.close();
            me.userCallback  && me.userCallback.fn.call(me.userCallback.scope);
        }
    }, me, 500);
    
});

4.上传

var GUID = WebUploader.Base.guid();
this.uploader.options.formData = Ext.apply({},{guid: GUID, /*type: type,*/ name});
var files = this.uploader.getFiles();
if(files.length)
{
    files[0].setStatus("inited");
}
this.uploader.upload();