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

最新推荐文章于 2020-02-03 22:18:46 发布

a94522538

最新推荐文章于 2020-02-03 22:18:46 发布

阅读量4.7k

点赞数 2

分类专栏： java Extjs6.0 文章标签： Extjs java js HTML5 formData

本文链接：https://blog.csdn.net/a94522538/article/details/52325980

版权

java 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Extjs6.0

1 篇文章 0 订阅

订阅专栏

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