【java開發】使用MultipartFile進行文件上傳的例子

時間 2019-12-04

標籤 java開發使用 multipartfile 進行文件上傳例子欄目 Java 简体版

原文原文鏈接

這是個文件上傳的例子。後端使用spring MVC的MultipartFile對象，接收來自頁面POST過來的數據。前端頁面使用XMLHttpRequest發送文件數據。javascript

後端代碼以下：html

package com.zkm.spring3.action;

import java.io.FileOutputStream;
import java.io.IOException;
import java.util.UUID;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
@RequestMapping(
		value="/test",
		produces = "text/html;charset=UTF-8")  
public class FileUploadTestAction {
    
    @RequestMapping(
    		method = RequestMethod.GET, 
    		value="/showFileUploadPage")  
    public String showFileUploadPage() {
        return "test/file_upload";  
    }  

	@RequestMapping(
			method = RequestMethod.POST, 
			value = "/postFileToServer")
	@ResponseBody
	public String postFileToServer(@RequestParam() MultipartFile fileHandler){
		
		if (fileHandler==null || fileHandler.isEmpty()) return "{\"code\":\"-1\",\"msg\":\"文件上傳失敗！\"}";
		System.out.println("name: " + fileHandler.getOriginalFilename() + "  size: " + fileHandler.getSize()); 
		
		String pathName = "/data/www/zkm-live/files/";
		String picFullFileName = pathName + UUID.randomUUID().toString() + "_" + fileHandler.getOriginalFilename();
		FileOutputStream fos = null;
		try {
			fos = new FileOutputStream(picFullFileName); 
			fos.write(fileHandler.getBytes()); // 寫入文件
			return "{\"code\":\"0\",\"msg\":\"文件上傳成功！\"}";
		} catch (Exception e) {
			e.printStackTrace();
			return "{\"code\":\"-1\",\"msg\":\"文件上傳失敗！\"}";
		} finally {
			try {
				fos.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

}

後端使用了spring3註解，有兩個action，第一個action用來顯示文件上傳的頁面，不包含任何業務邏輯；第二個action用來接收上傳的文件，而後寫入服務端本地文件，最後返回帶有成功標誌的json串。前端

前端代碼以下：java

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
	function fileSelected() {
		var file = document.getElementById('fileToUpload').files[0];
		if (file) {
			var fileSize = 0;
			if (file.size > 1024 * 1024){
				fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString()+ 'MB';
			}else{
				fileSize = (Math.round(file.size * 100 / 1024) / 100).toString()+ 'KB';
			}
			document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
			document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
			document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
		}
	}
	function uploadFile() {
		var fd = new FormData();
		fd.append("fileHandler",document.getElementById('fileToUpload').files[0]);
		var xhr = new XMLHttpRequest();
		xhr.upload.addEventListener("progress", uploadProgress, false);
		xhr.addEventListener("load", uploadComplete, false);
		xhr.addEventListener("error", uploadFailed, false);
		xhr.addEventListener("abort", uploadCanceled, false);
		xhr.open("POST", "/test/postFileToServer");
		xhr.send(fd);
	}
	function uploadProgress(evt) {
		if (evt.lengthComputable) {
			var percentComplete = Math.round(evt.loaded * 100 / evt.total);
			document.getElementById('progressNumber').innerHTML = percentComplete.toString()+ '%';
		} else {
			document.getElementById('progressNumber').innerHTML = 'unable to compute';
		}
	}
	function uploadComplete(evt) {
		/* This event is raised when the server send back a response */
		alert(evt.target.responseText);
	}
	function uploadFailed(evt) {
		alert("There was an error attempting to upload the file.");
	}
	function uploadCanceled(evt) {
		alert("The upload has been canceled by the user or the browser dropped the connection.");
	}
</script>
</head>
<body>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" /> 
<span id="fileName"></span> 
<span id="fileSize"></span> 
<span id="fileType"></span> 
<input type="button" onclick="uploadFile()" value="Upload" /> 
<span id="progressNumber"></span>
</body>
</html>

前端使用XMLHttpRequest提交POST數據。曾嘗試用jquery的post方法，但不成功。jquery

最後須要注意的是，前端提交的formData中，有這樣一句話：web

fd.append("fileHandler",document.getElementById('fileToUpload').files[0]);

也就是說，fileHandler 是一個關鍵字，後端接收文件的 MultipartFile 也必須叫這個名字。不然會出現下面的錯誤：spring

所以，後端的 MultipartFile 命名有兩種寫法，分別是：json

public String postFileToServer(@RequestParam("fileHandler") MultipartFile multipartFile ){

或：後端

public String postFileToServer(@RequestParam() MultipartFile fileHandler){

對於第一種寫法，我徹底可以理解，由於，經過註解進行了綁定。app

可是第二種寫法，我以爲有點奇怪。jdk編譯事後的目標碼，變量名字是沒有任何意義的，那麼先後端是如何實現變量綁定的呢？

參考資料：

http://www.cnblogs.com/xiandedanteng/p/4168609.html

相關標籤/搜索