使用ajaxFileUpload向后台传文件

一.要实现的功能：
1.点击上传按钮，弹出文件选择框

2.选择文件后，文件传至后台

3.后台文件接收（一般传至后台可以解析，保存等，这里暂不考虑，只讨论后台接收到文件为止）。

二.实现思路以及代码：
1.点击上传按钮，弹出文件选择框

首先，我们需要一个按钮

点击上传
其次，为按钮绑定点击事件，我们需要的是点击之后打开文件选择框，这里可以走个捷径，就是触发一个类型为file的input标签click事件。

这里加一个隐藏的input（这里通过accept设置只能接收excel格式的文件）

<input id="fileInput" name="fileInput" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display:none">

给按钮添加点击事件，触发input的点击事件打开文件选择框。

	   $('#uploadButton').on("click",function(){
	   	document.getElementById("fileInput").click();	   
	   });

选择好文件后，会自动触发输入框的onchange()事件，onchange（）后进行文件向后台传递的操作。

input输入框注册onchange()事件：

	$("#fileInput").attr("onchange","submitFile()");	

这里调用了submitFile()方法（见2）

2.选择文件后，文件传至后台

function submitImportFile(){
 	$.ajaxFileUpload({
		url:"getUploadExcelFile",
		fileElementId:"fileInput",
		//data:{inputFile:"fileInput"},这是input的name字段，我后台写死了
		secureuri: false,
		dataType: 'JSON',
		success:function(result){
/**do something**/
}
});
}

其中：

url即后台接收请求的url ；

fileElementId为上传文件的那个input框的id；

注意，此处用了ajaxFileUpload，需要引入对应的文件。链接我稍后上传。注意ajaxfileuploadjs里面个别方法我做了修改，主要是 uploadHttpData方法，如果你的运行出现问题，不妨看下那里的代码是否符合你的需求。

3.后台文件接收

需要引入两个jar包，我使用的maven管理，在pom.xml引入以下几句话即可：

@RequestMapping("getUploadExcelFile")
@ResponseBody
	public Object importExcel(MultipartHttpServletRequest request) {
            List<Map<String,Object>> rowList = new ArrayList<Map<String,Object>>();		
			String inputFile = "fileInput";//文件input框的name属性
			CommonsMultipartFile file = (CommonsMultipartFile) request.getFile(inputFile);
	     /*do something*/
	}

controller:

@RequestMapping("getUploadExcelFile")
@ResponseBody
	public Object importExcel(MultipartHttpServletRequest request) {
            List<Map<String,Object>> rowList = new ArrayList<Map<String,Object>>();		
			String inputFile = "fileInput";//文件input框的name属性
			CommonsMultipartFile file = (CommonsMultipartFile) request.getFile(inputFile);
	     /*do something*/
	}

至此，我们后台就获得上传的File文件，后续根据需求，对获得的文件进行操作即可~