前幾天在用ajaxfileupload上傳檔案時發現ajaxfileupload無法帶參傳遞，於是我從github上找到了一個現成的可以帶參傳遞的ajaxfileupload，並學習了ajaxfileupload怎麼上傳檔案。

可以帶參傳遞的ajaxfileupload的github地址：https://github.com/carlcarl/AjaxFileUpload

Html

<!-- form表單的enctype屬性必須設定為multipart/form-data。 -->
<form class="am-form tjlanmu" enctype="multipart/form-data">
    <select name="categoryName" id="categoryId" data-am-selected="{btnWidth: 90, btnSize: 'sm', btnStyle: 'default'}">
        	<c:forEach var="c" items="${categoryList }">
              <option value="${c.id }">${c.categoryName }</option>
          	</c:forEach>
    </select>
    <input name="photo" id="imageFile1" type="file"><!-- id必須唯一，Name必須有 -->
    <button id="addProjectButton" type="button">提交</button>
</form>
 

form表單的enctype屬性必須設定為multipart/form-data。

上傳檔案的input的id必須唯一，name屬性必須有。

ajax

//新增project
$("#addProjectButton").click(function(){
	var project = {
		   "category_id":$("#categoryId option:selected")[0].value
				};
	$.ajaxFileUpload({
		    url:"addProject.action",//用於檔案上傳的伺服器端請求地址
			secureuri:false,//是否需要安全協議，一般設定為false
			data:project,//傳遞的引數
			fileElementId:"imageFile1",//檔案上傳域的ID
			dataType:"JSON",//返回值型別
			success:function(data,status){
				//伺服器成功響應處理函式
				if(data==1){
					alert("新增成功");
					window.location='/vitae/projectInformation.action';
				}else{
					alert(data);
					alert("新增失敗");
				}
			 },
			 error:function(data,status,e){
			    //伺服器響應失敗處理函式
				//e 異常資訊
				alert("error");
			 }
	})
});
 

ajaxfileupload的fileElementId是上傳檔案的input的id。

Controller

/**
	 * 新增project
	 * */
	@RequestMapping("/addProject.action")
	@ResponseBody
	public String addProject(int category_id,@RequestParam("photo") MultipartFile uploadfile){
        String dirpath = "E:/viate/uploadImage/";//上傳檔案儲存的地址，最好先建立好
		Project project = new Project();
		System.out.println(category_id);
		project.setCategory_id(category_id);
			//判斷所上傳檔案是否存在
			if(!uploadfile.isEmpty()){
				//獲取上傳檔案的原始名稱
				String originalFilename = uploadfile.getOriginalFilename();
				//設定上傳檔案的儲存地址目錄
				File filePath = new File(dirPath);
				//如果儲存檔案的地址不存在，就先建立目錄
				if(!filePath.exists())filePath.mkdirs();
				//使用UUID重新命名上傳的檔名稱（uuid_原始檔名稱）
				String newFilename = UUID.randomUUID()+"_"+originalFilename;
				try {
					//使用MultipartFile介面的方法完成檔案上傳到指定位置
					uploadfile.transferTo(new File(dirPath+newFilename));
				} catch (IllegalStateException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				project.setPhoto("/uploadImages/"+newFilename);
				projectService.addProject(project);
				return "1";
		}
		return "0";
	}
 

 MultipartFile uploadfile就是接收上傳的檔案，@RequestParam("photo")的photo是上傳檔案input的name

本人用的是tomcat，要在tomcat的server.xml中的<Host></Host>之間加上圖片伺服器即：

               <Context docBase="E:/viate/uploadImage/" reloadable="true" path="/uploadImages"/>

其中docBase為檔案儲存路徑，path為圖片伺服器訪問名