最近公司的專案要用到檔案上傳，然後發現單檔案上傳還是挺簡單，但是多檔案就有點麻煩了，廢話不會說，多見諒，下面是正文：

首先在網上找到了swfUpload，個人感覺樣子不太好看，效果如下：

然後我找到了bootstrap fileupload，先看效果圖：

官網demo地址：http://plugins.krajee.com/file-input/demo 

txt、excel支援檔案預覽，圖片可以放大 左右翻看，非常nice！！！！

下面是後臺程式碼

SpringMVC 配置及程式碼如下：

1、配置SpringMVC檔案上傳解析器：applicationContext.xml 中增加如下配置：

<!-- 配置SpringMVC檔案上傳解析器  -->
	<bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	<property name="maxUploadSize" value="-1" />
    	<property name="defaultEncoding" value="UTF-8" />
    	<property name="maxInMemorySize" value="40960"></property>
    </bean>
 

@RequestMapping(value = "/upload", produces = "text/html;charset=utf-8")
	@ResponseBody
	public String uploadFlatness(@RequestParam("fileId") MultipartFile file,
			HttpServletRequest request) throws IOException {
		// 1、解析檔案資料，並存入車檢資料庫
		InputStream fileInput = fileInput = file.getInputStream() ;
		String name = file.getOriginalFilename();
		fileInput.close();
		return "上傳成功："+name;
	}
 

SpringMVC+bootsrap 操作已經晚了，很簡單吧~

下面介紹兩個有用的方法：

1、如果頁面中某個值或者內容改變需要調整上傳路徑，可以借鑑下面：

$("#fileId").fileinput(
				"refresh",
				{
					uploadUrl : basePath
							+ 'ptcms/lkpd/ptcdImport/uploadFlatness/SFC/' + screening
				});

$(document).on('fileuploaded', function(event, data, previewId, index) {
		if (data.response.status == "error") {
			var d = data.response.data;
			for ( var i = 0; i < d.length; i++) {
				d[i].fileName = data.filenames[index];
				datas.push(d[i]);
			}

			if ((data.filenames.length - 1) == index) {
				mini.alert("檢測資料校驗不通過，無法匯入");
				var grid = mini.get("resultGrid");
				grid.setData(datas);
				datas = new Array();
			}
		} else {
			var grid = mini.get("resultGrid");
			grid.load();
		}
	});