如何使用enctype =“multipart / form-data”使用AJAX提交表单？

how to submit Form with AJAX Using enctype="multipart/form-data"?

如何使用enctype =“multipart / form-data”使用AJAX提交表单？

2 个解决方案

#1

Short answer: you don't. You cannot upload files via AJAX.

简短的回答：你没有。您无法通过AJAX上传文件。

The usual workaround is to set the target of your form to a hidden iframe and submit the form there, using a normal, non-AJAXy POST, to achieve the desired effect:

通常的解决方法是将表单的目标设置为隐藏的iframe，并使用普通的非AJAXy POST将表单提交到那里，以实现所需的效果：

<form target="hiddenIframe" method="post" enctype="multipart/form-data">
    ...
</form>
<iframe name="hiddenIframe" id="hiddenIframe" style="display: none;" />

There's a jQuery plugin that uses this technique.

有一个使用这种技术的jQuery插件。

Edited to add:

XMLHttpRequest level 2 added support for uploading files via AJAX, and its browser support is now good and growing. Here's a browser support overview.

XMLHttpRequest level 2增加了对通过AJAX上传文件的支持，其浏览器支持现在已经很好并且不断增长。这是一个浏览器支持概述。

#2

Here's a way that works even with IE8 and above:

Use malsup's jquery form plugin, which will take care of both XHR as well as the hidden iframe that IE needs for ajax upload.

使用malsup的jquery表单插件，它将处理XHR以及IE上传ajax所需的隐藏iframe。

Code snippet here:

这里的代码片段：

<form id="formid" action="" enctype="multipart/form-data" method="POST" accept-charset="utf-8">
.
.
.
</form>

<script type="text/javascript">
        $(document).ready(function()
        {
            var options = { 
                cache:'false',   //IE FIX
                data: $('#formid').serialize(),
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(data) 
                {
                    //success action
                },
                error: function(XMLHttpRequest, textStatus, errorThrown)
                {
                    //error action
                }
            }; 
            $('#formid').ajaxForm(options); 
        });
</script>