1. base64(字符串)作為數據源（在前端生成的文件而非選擇的文件）察藐。
前端調用上傳接口示例
// 圖片分組上傳良蒸，images，subjectTypeImages 為圖片轉的base64數組粮呢，titles是字符串數組婿失。
var formData = new FormData();
images.forEach(function (image) {
formData.append("picture[]", image);
});
subjectTypeImages.forEach(function (image) {
formData.append("subjectTypeImages[]", image);
});
subjectStatusImages.forEach(function (image) {
formData.append("subjectStatusImages[]", image);
});
titles.forEach(function (image) {
formData.append("titles[]", image);
});
// 而外的參數數據
formData.append("titleKey", titleKey);
formData.append("searchType", searchType);
$.ajax({
url:'upload.do',
method:'POST',
data:formData,
// 默認為true，設為false后直到ajax請求結束(調完回掉函數)后才會執(zhí)行$.ajax(...)后面的代碼
async: false,
// 下面三個鬼贱，因為直接使用FormData作為數據移怯，contentType會自動設置，也不需要jquery做進一步的數據處理(序列化)这难。
cache: false,
contentType: false,
processData: false,
success:function(data){
console.log(data);
},
error:function(error){
console.log(error.message);
}
});
java(springMVC) 后端接收示例
@ResponseBody
@RequestMapping(value = "upload.do", method = RequestMethod.POST)
public Object upload(HttpServletRequest request) throws Exception {
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
// 先判斷request中是否包涵multipart類型的數據舟误，
if (multipartResolver.isMultipart(request)) {
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
String[] picture = multiRequest.getParameterValues("picture[]");
String[] subjectTypeImages = multiRequest.getParameterValues("subjectTypeImages[]");
String[] subjectStatusImages = multiRequest.getParameterValues("subjectStatusImages[]");
String[] titles = multiRequest.getParameterValues("titles[]");
String searchType = multiRequest.getParameter("searchType");
String titleKey = multiRequest.getParameter("titleKey");
// todo: any-thing
}
return "success";
}
2. form 表單中使用input 選擇文件上傳， File類型
form 表單
<form id="form111" enctype="multipart/form-data" method="post" action="#">
<input type="file" name="files">
<input type="file" name="files">
<input type="file" name="files">
<!-- 這個可以選擇多個文件姻乓，而且只可以選圖片 -->
<input type="file" name="files" accept="image/*" multiple>
<input type="text" name="username">
<input type="button" id="btn">
</form>
javascript 上傳接口調用示例
$("#btn").click(function () {
// 獲取所有文件
// 1. 使用直接使用form表單獲取嵌溢，會獲取所有input值
var fomdata = new FormData(document.getElementById("form111"));
// 2. 只獲取文件
var fomdata = new FormData();
$("#form111").children("input[name='files']").each(function (index, input) {
for(var i=0; i<input.files.length; i++) {
fomdata.append("files", input.files[i]);
}
});
$.ajax({
method:'POST',
data:formData,
url:'upload.do',
// async: false, // 同步上傳，默認(true)異步
cache: false,
contentType: false,
processData: false,
success:function(data){
console.log(data);
},
error:function(){
console.log('上傳失敗');
}
});
});
java(springMVC) 后端代碼示例
@ResponseBody
@RequestMapping(value = "upload.do", method = RequestMethod.POST)
public Object upload(MultipartFile[] files/* files 為input的name蹋岩，這樣就可以獲取所有文件的數組了赖草。*/, String filename, HttpServletRequest request) throws Exception {
// 遍歷數組保存文件，并把文件相對路徑存到數據庫剪个。秧骑。。等扣囊。
return "success";
}
推薦一個前端上傳組件
java 后端代碼示例
@ResponseBody
@RequestMapping(value = "upload.do", method = RequestMethod.POST)
public Object uploadFile(MultipartFile file, String name1, HttpServletRequest request) throws Exception {
UploadDto uploadDto = new UploadDto(); // 就是一個格式化返回信息的類乎折。
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
// 先判斷request中是否包涵multipart類型的數據，
if (multipartResolver.isMultipart(request)) {
try {
//
String fileId = service.saveFile(file);
uploadDto.setMessage("上傳成功!");
uploadDto.setCode(0);
uploadDto.setFileId(fileId);
} catch (Exception e) {
e.printStackTrace();
uploadDto.setMessage("上傳失敗!");
uploadDto.setCode(-1);
}
}
return uploadDto;
}
