一.要實現的功能：

1.點選上傳按鈕，彈出檔案選擇框

2.選擇檔案後，檔案傳至後臺

3.後臺檔案接收（一般傳至後臺可以解析，儲存等，這裡暫不考慮，只討論後臺接收到檔案為止）。

二.實現思路以及程式碼：

1.點選上傳按鈕，彈出檔案選擇框

首先，我們需要一個按鈕

<a id="uploadButton" class="easyui-linkbutton" >點選上傳</a>

其次，為按鈕繫結點選事件，我們需要的是點選之後開啟檔案選擇框，這裡可以走個捷徑，就是觸發一個型別為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引入以下幾句話即可：

/*pom.xml配置*/

   <dependency>

             <groupId>commons-fileupload</groupId>

             <artifactId>commons-fileupload</artifactId>

             <version>1.3.1</version>

   </dependency>

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檔案，後續根據需求，對獲得的檔案進行操作即可~