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();