通过 AJAX 上传图片，不能在 jQuery 中使用 serialize() 方法？

Posted 2023-02-24

【中文标题】通过 AJAX 上传图片，不能在 jQuery 中使用 serialize() 方法？

【英文标题】：Uploading image by AJAX, cannot use the serialize() method in jQuery?

【发布时间】：2014-08-07 18:25:56

【问题描述】：

我发现使用 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() */

我有这个 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>

以下是我的 ajax 代码，它将图像发送到地址 /uploadPost 的上传处理程序。我的 Java 代码中的 uploadPost() 方法首先确定上传是否是多部分的，但是，ajax 似乎不会将图像作为多部分发送。是不是因为我在表单上使用了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>

【参考方案1】：

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

【讨论】：

就像一个魅力。谢谢。我花了无数个小时才找到你的答案。谢谢

请注意，FormData 使用的是 DOM 元素，而不是 jQuery，它是 $(this)

【参考方案2】：

您可以使用 Formdata() ，API DOC

代码将类似于现有问题Stack Overflow Link中给出的答案