![](/img/trans.png)
[英]400 Bad Request When Send Multipart Request To Spring MVC Controller
[英]Send multipart request from ajax to spring controller without form?
我正在從桌面上傳圖片,然后將此圖片轉換為javascript中的基本代碼。 之后,我想將此圖像基本代碼與multipart請求一起發送給spring控制器。 但是我沒有使用Form。
的HTML
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL()">
Java腳本
window.photoCakeUrl = '<c:url value="/media/image/upload"/>';
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function (fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
var photoCake = srcData;
newImage.src = srcData;
document.getElementById("imgTest").innerHTML = newImage.outerHTML;
var ajax1 = $.ajax({
type: 'POST',
url: photoCakeUrl,
processData: false, // important
contentType: false, // important
dataType: 'json',
data: {photoCak: photoCake}
});
});
},
fileReader.readAsDataURL(fileToLoad);
}
}
彈簧控制器:
@RequestMapping(value = "/media/image/upload", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> productPictureUploadnew(MultipartHttpServletRequest request, HttpServletResponse response) {
Map<String, String> resp = new HashMap<>();
String photoCake = request.getParameter("photoCak");
System.out.println("photoCake " + photoCake);
return resp;
}
但是,當我生成AJAX調用時,將出現500錯誤。 如果我只是簡單地使用
public Map<String, String> productPictureUploadnew(HttpServletRequest
request, HttpServletResponse response)
然后就可以了。 意味着當我使用HttpServletRequest請求的 MultipartHttpServletRequest位置時,則它不起作用。
我得到了解決方案,我們可以在javascript中使用formData而不在任何JSP中使用form來發送MultipartHttpServletRequest。
window.photoCakeUrl = '<c:url value="/media/image/upload"/>';
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function (fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
var photoCake = srcData;
newImage.src = srcData;
document.getElementById("imgTest").innerHTML = newImage.outerHTML;
var formData = new FormData();
formData.append("imgFile", document.getElementById("inputFileToLoad").files[0]);
var ajax1 = $.ajax({
type: 'POST',
url: photoCakeUrl,
dataType: 'json',
data: {photoCak: photoCake}
});
});
},
fileReader.readAsDataURL(fileToLoad);
}
}
var formData = new FormData();
formData.append(“ imgFile”,document.getElementById(“ inputFileToLoad”)。files [0]);
控制器:
@RequestMapping(value = "/media/image/upload", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> productPictureUploadnew(MultipartHttpServletRequest request, HttpServletResponse response) {
Map<String, String> resp = new HashMap<>();
System.out.println("fsasasafsafsafsafsa");
Iterator<String> itr = request.getFileNames();
String photoCake = request.getParameter("photoCak");
File file;
----------
-------
----------
return resp;
}
謝謝,希望對您有幫助。
您將其作為multipart / form-data發送時,這可能就是HttpServletRequest無法獲取數據的原因,從ajax調用中刪除contentType
選項,然后jquery將使用defaylt wiz。 'application / x-www-form-urlencoded; charset = UTF-8'
var ajax1 = $.ajax({
type: 'POST',
url: photoCakeUrl,
processData: false, // important
dataType: 'json',
data: {photoCak: photoCake}
});
這就是我要做的:
window.photoCakeUrl = '<c:url value="/media/image/upload"/>';
window.URL = window.URL || window.webkitURL
function encodeImageFileAsURL() {
var filesSelected = $('#inputFileToLoad')[0].files;
if (filesSelected.length) {
var fileToLoad = filesSelected[0];
var img = new Image();
var formData = new FormData();
formData.append('imgFile', fileToLoad);
img.onload = function() {
// only append the image once it's loaded so we don't append broken images
$('#imgTest').html(this);
URL.revokeObjectURL(this.src); // Release memory
// Uploading a image when we can ensure it's a image that can be loaded
fetch(photoCakeUrl, {method: 'POST', body: formData});
}
img.onerror = function() {
// You didn't upload a image
}
img.src = URL.createObjectURL(srcData);
}
}
new Image
,它是createElement('img')
的更好分類器版本 $.ajax
cuz jQuery愚蠢地處理formData(需要將processData&contentType設置為false) accept="images/*"
屬性以過濾掉圖像
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.