通过AJAX上传图片，不能在jQuery中使用serialize（）方法？ [英] Uploading image by AJAX, cannot use the serialize() method in jQuery?

问题描述

我发现使用AJAX上传图像似乎不能使用表单中指定的multipart，因为我的代码用于检查它的multipart（）是否从不起作用（在Java中）;

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);

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() */
}

我有这个html表格：

I have this html form:

<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>

以下是我的ajax代码，它将图像发送到地址 / uploadPost 的上传处理程序。我的Java代码中的uploadPost（）方法首先确定上传是否是多部分，但是，似乎ajax不会将图像作为multipart发送。是因为我在表单上使用jQuery的serialize（）方法吗？

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?

<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>

推荐答案

从serialize（）更改为以下代码适用于我：

Changing from serialize() to the following code works for me:

$('#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>");
                }
                });
            });

这篇关于通过AJAX上传图片，不能在jQuery中使用serialize（）方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！