HTML 5 FormDataマルチファイルアップロード
3214 ワード
, , jquery post ,
Formdata append file , ,
formdata key append file , 。
html要素:
type="file" name="uploadImgs" id="file" multiple="multiple"/>
JavaScript:
function fileUpload(){
var data = new FormData();
var files= $("#file")[0].files;
/** append file key */
for(var i=0;i"picture", files[i]);
}
$.ajax({
data: data,
url: '/uploadImg',
type: "POST",
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: function (resp) {
console.log(resp);
}
})
}
, Springboot , controller :
@PostMapping("/uploadImg")
public ResponsePO pictureUpload(@RequestParam("picture") List files) {
ResponsePO resultPO = new ResponsePO();
List urls = new ArrayList<>();
try {
for (MultipartFile file : files) {
String fileName = storageService.store(file);
urls.add("/uploadimg/" + fileName);
}
resultPO.setR(1);
resultPO.setD(urls);
return resultPO;
} catch (Exception e) {
resultPO.setR(0);
resultPO.setErrAndMsg(EXCEPTION_FOND);
return resultPO;
}
}