js+jquery上傳文件/圖片

採用表單

1、上傳單張圖片

accept="image/*" 接受任何類型的圖片

前端：

後臺：

2、上傳多張圖片

前端：

<form action='/xxxx" method="xxx">
	<input type="file" id="file1">
	<input type="file" id="file2">
	<input type="file" id="file3">
	....
	<input tyle="submit">
</form>

後臺：
採用@RequestParam(“file1”) 、@RequestParam(“file2”)、@RequestParam(“file3”)、、、對應

採用ajax

出現如下bug:

• Unable to process parts as no multi-part configuration has been provided
• Required request part ‘file’ is not present。。。。。
• the request was rejected because no multipart boundary was found

可能有如下原因：

1、項目配置：【我這裏是springboot項目配置】

• spring-servlet-multipart-enabled=true;【true默認開啓】
• spring-http-multipart-enabled=true;【true默認開啓】

2、可能是@RequestParam(）註解名稱和前端沒對應上，
3、可能是前端獲取文件沒有傳過去

解決方法：

• 可利用表單的FormData傳遞參數
  • new FormData($("#表單id")).append(key,value); key對應上面的file1，file2…
  • $(’#file’)[0].files[i-1]【value】獲取對應文件/圖片/…，
  • 注意不要設置content-Type（會自動加上，否則就是畫蛇添足），
  • 並且取消序列化processData)

測試：

查看上傳時的contentType是否爲multipart/form-data; boundary=…：