您的位置:首页 > Web前端 > JavaScript

EXTJS使用H5 formdata实现多文件上传

2016-08-26 10:26 756 查看
var formWin=Ext.create('Ext.window.Window', {
layout: 'fit',
width: 350,
closable: true,
modal: true,
scrollable:true,
id:'backupsFormWin',
items: [
{
id:'backupsForm',
scrollable:true,
xtype: 'form',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff',

fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
combineErrors: true,
msgOnlineResource: 'side',
fieldCls: 'fixed' //fix for textfield text in Chrome
},

items: [
{
xtype:'panel',
border: false,
id:'panel',
items:[{closable:false,html:'<div class="file"><form name="backupsFiles" enctype="multipart/form-data" method="post">' +
'<input  onchange="changeSelectFileNames(this.value)" style="font-size:15px;padding-bottom:3px;" type="file"  ' +
'name="uploadFile" id="uploadFileBtn" multiple=true/></form><label id="selectFileNamesLabel">未选择文件</label><button onclick="selectFile()" class="btn">选择文件</button></div>'}]
}
]
}
],
有些css样式如下
<pre name="code" class="css">.file input {
font-size: 13px;
right: 0;
top: 0;
opacity: 0;
visibility:hidden;
}

.file label{
position: relative;
display: inline-block;
width:180px;
border: 1px solid #99D3F5;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
height: 40px;
bottom:33px;
left:10px;
padding-top:12px;
}

.file .btn{
position: relative;
display: inline-block;
border:none;
height:40px;
background-color:#5FA2DD;
color:white;
width:80px;
bottom:49px;
margin-left: 30px;
}



sendform方法如下<pre name="code" class="javascript">	var myMask=null;
this.sendForm=function(){
var oData = new FormData(document.forms.namedItem("backupsFiles"));
oData.append("path", path);
var oReq = new XMLHttpRequest();
oReq.open("POST", "url", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
Ext.Msg.alert("提示","保存成功");
Ext.getBody().unmask();
checkFile(path);
} else {
Ext.Msg.alert("提示信息","错误码:"+oReq.status);
}
};
Ext.getCmp('backupsFormWin').hide();
myMask = Ext.getBody().mask("正在上传...","x-mask-loading");
oReq.send(oData);

}



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Extjs java js HTML5 formData