如何使用 enctype="multipart/form-data" 使用 AJAX 提交表单？答案

【问题标题】：how to submit Form with AJAX Using enctype="multipart/form-data"?如何使用 enctype="multipart/form-data" 使用 AJAX 提交表单？
【发布时间】：2011-08-05 12:19:24
【问题描述】：

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

【问题讨论】：

您可以使用 XMLHttpRequest 方法。看这个：stackoverflow.com/questions/6974684/…

标签： javascript html ajax

【解决方案1】：

简短的回答：你不知道。您不能通过 AJAX 上传文件。

通常的解决方法是将表单的目标设置为隐藏的iframe，然后使用普通的非 AJAXy POST 将表单提交到那里，以达到预期的效果：

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

有一个jQuery plugin 使用了这种技术。

编辑添加：

XMLHttpRequest level 2 增加了对通过 AJAX 上传文件的支持，它的浏览器支持现在很好并且还在增长。这是browser support overview。

【讨论】：

此信息已过时，现在可以通过 AJAX 上传文件，而且非常简单。看看 XHR2。 HTML5Rocks 上有一篇好文章：updates.html5rocks.com/2012/04/…
jQuery 插件的链接现在无效。我正在尝试为旧浏览器修复一个解决方案，这样它会派上用场（如果你能再次找到它）:)

【解决方案2】：

这是一种即使在 IE8 及更高版本上也可以使用的方法：

使用 malsup 的 jquery form plugin，它将同时处理 XHR 以及 IE 上传 ajax 所需的隐藏 iframe。

代码 sn-p 在这里：

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

【讨论】：