使用FormData格式上傳影象並預覽圖片
阿新 • • 發佈：2018-12-31
前言
- 做專案時，遇到表單中影象需要跟表單一起提交，這樣會造成後臺沒辦法接收到圖片。後面上網調查後，明白表單提交時是預設application/x-www-form-urlencoded格式，只接受鍵值對。所以以下例子採用FormData格式非同步提交表單，因為formData格式可以接收檔案格式。
具體流程
- 1.引入maven
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId - 2.在全域性配置檔案中引入相關配置
<!--multipart處理類-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760"/>
<property name="maxInMemorySize" value="4096"/>
</bean>- 3.定義jsp檔案
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<body>
<h1>使用formData形式上傳檔案</h1>
<form id="uploadForm" method="post" action="/upload.ajax" >
<input type="file" id="avatar" name="avatar" onchange="previewImage('preview',this)" >
<img id="preview">
<button id="submit" type="button">提交</button>
</form>
</body>
</html>
<script src="/media/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//檢驗檔案格式並預覽
function previewImage(preImageId, imageFile) {
var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
if (!pattern.test(imageFile.value)) {
alert("系統僅支援jpg/jpeg/png/gif/bmp格式的照片！");
imageFile.focus();
$(imageFile).val("");
return false;
} else {
var path;
if (document.all)//IE
{
imageFile.select();
path = document.selection.createRange().text;
}
else//FF
{
path = URL.createObjectURL(imageFile.files[0]);
}
$('#' + preImageId).attr('src', path);
}
}
$('#submit').on('click',function () {
var formData = new FormData($( "#uploadForm" )[0]);
console.log(formData);
$.ajax({
type: 'POST',
url: '/upload.ajax',
data: formData,
contentType: false,
processData: false,
success: function (result) {
console.log(result);
},
});
});
</script>- 4.後臺採用MultiPartFile接收檔案
@RequestMapping("upload.ajax")
@ResponseBody
public String upload(MultipartFile avatar){
//處理avatar邏輯
return "success";
}後語
- 該實現並不難，主要了解表單提交格式和相關實現即可。希望可以幫到相關人員。