<html> <head> <title>FormData多圖上傳演示</title> </head> <body>
<a href="javascript:newPicture();" >上傳新圖片</a> <input id="picture" type="file" style="display: none;" multiple="multiple"> </body> <script type="text/javascript" src="/common/js/jquery.min.js"></script> <script type="text/javascript"> function newPicture(){ $('#picture').click(); } $('#picture').on('change',function(){ var files= $(this).get(0).files; //如果有選擇圖片則上傳圖片 var formData= new FormData(); if(files.length>0){ //formData.append("files",files[0]); for(var i=0;i<files.length;i++){
//FormData.set和append()的區別在於，如果指定的鍵已經存在，FormData.set會使用新值覆蓋已有的值，而append()會把新值添加到已有值集合的后面。
//注意：如果你的服務器端是PHP那么為了與php命名習慣一致在名稱中需要添加[]，如formData.append('files[]',files[i]); formData.append('files',files[i]); } var xhr= new XMLHttpRequest(); xhr.open('POST', '/uploadImgAlbums'); xhr.onreadystatechange = function(){ if (xhr.readyState== 4&& xhr.status== 200){ console.log('上傳成功'+xhr.responseText); //處理其他數據，這里根據需要進行調整 } }; xhr.send(formData); } }); </script> </html>
看完了頁面代碼，在看下后端的控制器，我后端使用了spring mvc：
@RequestMapping("uploadImgAlbums")
public void albumUploadImgs(@RequestParam(value = "files", required = true) MultipartFile[] multipartFiles,HttpServletRequest req, HttpServletResponse response){
for(MultipartFile multipartFile:multipartFiles){
//打印上傳的文件路徑
System.out.println(multipartFile.getOriginalFilename());
//打印文件字節數據
System.out.println(multipartFile.getBytes());
}
}
我這里只是簡單展示下數據發送到了后端文件上傳控制器，剩下的根據項目業務的需求繼續進行下去吧。
推薦閱讀：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHTTPRequest
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest