EXTJS系列笔记(6.X)————多文件选择上传

Extjs并没有提供选择多文件的组件，所以我们这里需要改建一下组件，而在使用的过程中碰到多个“坎”，在这里记录下，也给有需要的朋友 提供点力所能及的帮助。

1、扩展extjs组件，核心其实就是 找到 input[type=file]的组件，往里面加属性，因为this.getEl()可以拿取到这个组件最外层的div，所以往下找down，找到input的组件，另外，在change事件触发的时候，给当前插件添加一个 属性files，并赋值为选中的文件。

Ext.define('PAS.util.MultipartFile', {
    extend: 'Ext.form.field.File',
    alias: 'widget.multipartfile',
    xtype:"multipartfile",
    listeners:{
    	
    	//渲染以后  给当前组件添加   多选的属性
    	afterrender:function(){
            //这里如果需要一开始就 选择文件类型的，就需要这个属性，我这里注释掉了，表示全部文件都可        
            //以选择
//    		 var typeArray = ["application/x-shockwave-flash","audio/MP3","image/*","flv-application/octet-stream"];
    		 var fileDom = this.getEl().down('input[type=file]');
    		 fileDom.dom.setAttribute("multiple","multiple");
//    		 fileDom.dom.setAttribute("accept",typeArray.join(","));
    	},
    	//每次 重新选择文件的时候触发
    	//将  多选的  文件 赋值给    files属性
    	change: function(){
    		var fileDom = this.getEl().down('input[type=file]');
    		this.files =  fileDom.dom.files;
    	}
    	
    }  

})

实际使用的时候,当然使用之前要先 引入

     requires: [
          'PAS.util.MultipartFile'
     ]

{
	 xtype:"form",
	 layout: "column",
	 id:"coaview_form",
	 border:false,
	 items: [
		 {
			 xtype: 'multipartfile',
			 name: 'photo',
			 id:"coaview_multipartfile",
			 fieldLabel: '文件',
			 labelWidth: 50,
			 msgTarget: 'side',
			 allowBlank: false,
			 anchor: '100%',
			 buttonText: '选择上传文件...',
			 listeners: {
				 change: function(){
					var files = Ext.getCmp("coaview_multipartfile").files;
					if(files.length>20){
						alert("最多选择20个文件");
						return;
					}
					
					//这里的files就是你选择的所有文件，你可以做一些操作
					//自带很多属性，我这里列举几个,可以根据需要做操作
					//fileName:file.name,
					//fileSize:(file.size/1024)+'KB'
					//fileType:file.type
				 }
			 }
		 }
	 ]
}

选好了文件以后就要上传了，这个时候我这边用了jquery的ajax，以下的代码时点击上传按钮以后发生的：

//这里的files就是  之前上面代码中的 files 

//拿取上述 file组件 对应的form组件 建立一个 FormData对象
var data = new FormData(document.getElementById("coaview_form"));

//将文件 陆续赋值给 files（后台接受的属性名称）属性
for(var i=0;i<files.length;i++) {
	data.append("files", files[i]);
}

//如果你还有其他参数，就添加其他参数
data.append("remark", "我是备注");

//用juery的ajax方式提交到后台
var url="coa/fileUpload.do";
$.ajax({
	type: 'post',
	url: url,
	dataType: "text",
	data: data,


	contentType: false, //不设置内容类型
	processData: false, //不处理数据
	
	success: function (data) {
		alert(data);
	}

});

截止到此为止，前台工作结束，我后台使用的是 SpringBoot+SpringMVC，所以这里也贴一下后台的代码

@ResponseBody
@RequestMapping(value = "/fileUpload",method=RequestMethod.POST)
public String fileUpload(
		HttpServletRequest request,
		String remark
		){
	
	String rtnStr="" ;
	
	MultipartResolver resolver = 
			new CommonsMultipartResolver(
					request.getSession().getServletContext());
	if(resolver.isMultipart(request)){
		//判断是不是有文件上传
		MultipartHttpServletRequest multipartRequest = 
		resolver.resolveMultipart(request);
		List<MultipartFile> files = 
				multipartRequest.getFiles("files");
		
		//其他参数
		String[] remarks = 
				multipartRequest.getParameterValues("remark");

		List<CoaFile> coaFileList = 
				new ArrayList<CoaFile>();
		//文件保存到  具体目录下
		for(int i=0;i<files.size();i++){
			MultipartFile file = files.get(i);
			
			//这里就是所有文件遍历
		}
		
	}

	return "success".equals(rtnStr)?"上传成功!":rtnStr; 
	
}

到这里就全部结束，如果需要的同学多请在底下留言，我到时候发个demo到网站上。