大家都知道在html4時代，上傳隻能使用表單post送出方式，無法使用ajax(XMLHttpRequest )直接進行表單送出。但在HTML 5的概念形成後，W3C開始考慮标準化XMLHttpRequest Level接口，配合FormData即可實作ajax檔案上傳。
1、upload.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>IIS系統</title>
<script type="text/javascript" src="<%=basePath %>js/easyui1.4/jquery.min.js"></script>
<script>
/**
* ajax 上傳。
*/
function uploadByForm() {
var formData = new FormData($("#myForm")[0]);
//用form 表單直接 構造formData 對象; 就不需要下面的append 方法來為表單進行指派了。
//var formData = new FormData();//構造空對象，下面用append 方法指派。
// formData.append("policy", "");
// formData.append("signature", "");
// formData.append("file", $("#file_upload")[0].files[0]);
var url = "<%=basePath %>upload";
$.ajax({
url : url,
type : 'POST',
data : formData,
/**
* 必須false才會避開jQuery對 formdata 的預設處理
* XMLHttpRequest會對 formdata 進行正确的處理
*/
processData : false,
/**
*必須false才會自動加上正确的Content-Type
*/
contentType : false,
success : function(responseStr) {
alert("成功：" + JSON.stringify(responseStr));
// var jsonObj = $.parseJSON(responseStr);//eval（"("+responseStr+")");
},
error : function(responseStr) {
alert("失敗:" + JSON.stringify(responseStr));//将 json對象 轉成 json字元串。
}
});
}
</script>
</head>
<body style="height:100%;width:100%;overflow:hidden;border:none;" >
<form id="myForm" action="http://v0.api.upyun.com/xxx" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-2 control-label">說明:</label>
<div class="col-sm-10">
<p class="form-control-static ">ajax 檔案上傳 。</p>
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-2 control-label"><s>*</s>圖檔選擇:</label>
<div class="col-sm-7">
<input type="file" name="file" id="file_upload" value=""
class="form-control" placeholder="圖檔位址">
<input type="text" name="name" value="abc">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-7">
<a id="btnAjax" class="btn btn-info col-md-5 col-lg-offset-1"
οnclick="uploadByForm();">Ajax上傳</a>
</div>
</div>
</form>
</body>
</html> 2、springmvc的UploadController：
@Controller
public class UploadController {
@RequestMapping(value = "/upload")
@ResponseBody
public ResultMessage upload(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request, ModelMap model) {
String anme = request.getParameter("name");
System.out.println("開始");
String path = "D:\\iis\\uploadFiles";
String fileName = file.getOriginalFilename();
// String fileName = new Date().getTime()+".jpg";
System.out.println(path);
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//儲存
try {
file.transferTo(targetFile);
return new ResultMessage(0,"成功...");
} catch (Exception e) {
e.printStackTrace();
return new ResultMessage(1,"失敗....");
}
}
} ![SpringMVC(六) | 前後端互動之ajax與jsonjsonajax[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)