Spring MVC使用ajax實作檔案的上傳，并将上傳記錄添加到資料庫

最近在完成自己的畢業設計，但檔案的上傳功能以前都沒有遇到過，花了兩天的時間解決了。期間遇到了較多的問題，現對該功能做記錄。

1. 前端（使用BootStrap和ajax)
2. 後端使用Spring、Spring MVC和Mybatis

• 這裡主要包含兩個功能：（1）使用下拉清單選擇上傳者，其中的資訊通過ajax擷取并動态添加；（2） 建立上傳檔案的按鈕，并通過點選上傳按鈕 實作檔案的上傳

<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<form id="uploadfile" role="form" class="form-horizontal" enctype="multipart/form-data">
										<div class="form-group">
						<label for="uploader">上傳者</label> <select id="uploader" name="uploader"></select>
					</div>
					<div class="form-group">
						<label for="uploadFile">檔案上傳</label><input type="file"
							id="file" name="file" />
						<p class="help-block">這裡顯示幫助文檔</p>
					</div>
					<button type="button" class="btn btn-default" onClick="commit()">上傳</button>
				</form>
			</div>
		</div>
	</div>
           

//擷取所有的上傳者資訊，并動态添加到`select`選擇框中
		$(document).ready(
				function() {
					$.ajax({
						type : "POST",
						url : "${ctx}/employeeControl/getallEmoloyee",
						success : function(data) {
							$("#uploader").append(
									'<option value=0>請選擇</option>');
							for (var i = 0; i < data.length; i++) {
								$("#uploader").append(
										'<option value="'+data[i].employee_id+'">'
												+ data[i].username
												+ '</option>');
							}
						}
					});
				});
		//重點是這裡
		function commit() {
			var uploader = $("#uploader").val();//獲得`select`選擇器的value值
			var file = $("#file")[0].files[0];//獲得上傳檔案
			var form = new FormData();//初始化formDate對象
			//将兩個變量通過append方法添加到formdata中，append方法中的第一個參數必須與後端請求的一緻，第二個參數就是我們擷取到的值
			form.append("uploader",uploader);
			form.append("file",file);
			$.ajax({
				type : "POST",
				//檔案的上傳路徑
				url : "${ctx}/fileControl/addFile",
				//将formdata對象添加為參數
				data : form,
				//開啟異步
				async : true,
				cache : false,
				contentType : false,
				processData : false,
				success : function(data) {
				//後端傳回"SUCCESS"或"ERROR"
					alert(data)
				}
			});
		}
           

• 後端控制層代碼

@RequestMapping(value = "/addFile")
	@ResponseBody
	public String addFile(@RequestParam("file") CommonsMultipartFile uploadFile, HttpServletRequest request,
			@RequestParam(value="uploader") Integer uploader) {
		log.info("檔案："+uploadFile+"uploader:"+uploader);
		com.example.oa.domain.File f = new com.example.oa.domain.File();
		String filename = uploadFile.getOriginalFilename();
		String path = request.getSession().getServletContext().getRealPath("uploadfile");
		if (request instanceof MultipartHttpServletRequest) {
			String filepath = path + File.separator + filename;
			f.setFile_location(filepath);
			f.setFilename(filename);
			f.setFilesize(uploadFile.getSize());
			f.setEmployee_id(uploader);
			log.info("檔案路徑：" + path);
			log.info("名字" + uploadFile.getOriginalFilename());
			log.info(uploadFile.getSize());
			File file = new File(path, filename);
			if (!file.exists()) {
				file.mkdirs();
			}
			try {
				uploadFile.transferTo(file);
			} catch (IllegalStateException e) {
				e.printStackTrace();
				return "ERROR";
			} catch (IOException e) {
				e.printStackTrace();
				return "ERROR";
			}
			boolean isadded = fileservice.addFile(f);
			if (isadded) {
				return "SUCCESS";
			}
			return "ERROR";
		}
		return "ERROR";
	}
}
           

後端沒什麼好說的，獲得前端傳過來的參數，建立檔案夾，并使用set方法将檔案資訊傳回給服務層，再講資訊添加到資料庫即可。

我的畢業設計托管在碼雲上，該功能也包含其中，如果遇到問題，希望能幫助到你

https://gitee.com/longhaicheng/OA_system

至此，使用ajax實作檔案的上傳就完成了