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

Question

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

Answer 1

簡短的回答：你沒有。 您無法通過AJAX上傳文件。

通常的解決方法是將表單的目標設置為隱藏的iframe並使用普通的非AJAXy POST在那里提交表單，以實現所需的效果：

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

有一個使用這種技術的jQuery插件 。

編輯添加：

XMLHttpRequest level 2增加了對通過AJAX上傳文件的支持，其瀏覽器支持現在已經很好並且在不斷發展。 這是一個瀏覽器支持概述 。

Answer 2

這是一種即使使用IE8及以上版本也可以使用的方法：

使用malsup的jquery表單插件 ，它將處理XHR以及IE上傳ajax所需的隱藏iframe。

這里的代碼片段：

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