Java AJAX上传图片，jQuery中的serialize()方法不能用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24268931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uploading image by AJAX, cannot use the serialize() method in jQuery?
提问by TonyGW
I found that uploading image with AJAX doesn't seem working with multipart as specified in the form, because my code for checking if it's multipart() never works (in Java);
我发现使用 AJAX 上传图像似乎不适用于表单中指定的 multipart，因为我检查它是否是 multipart() 的代码从不工作（在 Java 中）；
if (context.isMultiPart()
{
System.out.println("received Multipart data");
}
else
{
System.out.println("not multipart data!"); /* my code always prints this message in the upload handler uploadPost() */
}
I have this html form:
我有这个 html 表单：
<div class="title"><label>Upload picture!</label></div>
<form method="post" id="imageUploadForm" enctype="multipart/form-data" action="/uploadPost">
Please specify file to upload: <input type="file" name="upfile"><br />
<input type="submit" value="submit" id="submitButton">
</form>
<div id="imagedisplay">
</div>
and the following is my ajax code that sends the image to the upload handler at the address /uploadPost. The uploadPost() method in my Java code first determines whether the upload is multipart or not, however, it seems that ajax does not send the image as multipart. Is it because I use jQuery's serialize() method on the form?
以下是我的 ajax 代码，它将图像发送到地址处的上传处理程序/uploadPost。我的Java代码中的uploadPost()方法首先判断上传是否是multipart的，但是好像ajax并没有把图片作为multipart发送。是因为我在表单上使用了 jQuery 的 serialize() 方法吗？
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#imageUploadForm').submit(function(evt) {
var formData = $('#imageUploadForm').serialize();
$.post('/uploadPost', formData, uploadResults);
evt.preventDefault();
});
// display the uploaded image on the same page
function uploadResults(data) {
$('#imagedisplay').html("<img src=" + data.url + "" + data.name + ">");
} // end of uploadResults
}); // end of ready
</script>
采纳答案by TonyGW
Changing from serialize() to the following code works for me:
从 serialize() 更改为以下代码对我有用：
$('#imageUploadForm').submit(function(evt) {
evt.preventDefault();
var formData = new FormData(this);
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success: function(data) {
$('#imagedisplay').html("<img src=" + data.url + "" + data.name + ">");
},
error: function(data) {
$('#imagedisplay').html("<h2>this file type is not supported</h2>");
}
});
});
回答by Jayaram
You can make use of Formdata() , API DOC
您可以使用 Formdata() ，API DOC
The code will be similar to the the answer given in the existing question Stack Overflow Link
该代码将类似于现有问题Stack Overflow Link 中给出的答案
