通过

在 Microsoft Edge 中，XMLHttpRequest 无法正确发送包含空文件元素的 FormData。

警告

已停用、不受支持的 Internet Explorer 11 桌面应用程序在某些版本的 Windows 10 上已通过 Microsoft Edge 更新永久禁用。 有关详细信息，请参阅 Internet Explorer 11 桌面应用停用常见问题解答。

本文提供了解决方法，用于解决在 Windows 10 版本 1809 的 Microsoft Edge 中，FormData 无法正确发送包含空文件元素的 XMLHttpRequest 问题。

原始产品版本： Microsoft Edge、Windows 10
原始 KB 数： 4490157

现象

XMLHttpRequest 方法 （jQuery.ajax()） 发送时，在 Windows 10 版本 1809 的 Microsoft Edge 中，无法正确发送包含空文件元素的 FormData 对象。

例如，设置一个仅包含一个文件元素的文件，并将所有其他文件元素留空，如以下代码示例所示：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.4.js"
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>
    </head>
    <body>
        <form action="/AjaxUploadSample/Home/FileUpload" enctype="multipart/form-data" method="post">
            <input name="files" id="files" type="file" value=""><br>
            <input name="files" id="files" type="file" value=""><br>
            <input name="files" id="files" type="file" value=""><br>
            <button id="btn" type="button">Async Upload</button>
        </form>
        <hr>
        <p id="message" style="white-space:pre;"></p>
        <script>
            $(document).ready(function () {
                $("#btn").on("click", function () {
                    var _form = $(this).closest("form")[0];
                    $.ajax({
                        type: "post",
                        url: _form.action,
                        processData: false,
                        contentType: false,
                        data: new FormData(_form),
                        success: function (data, textStatus, jqXHR) {
                            $("#message").text(data.Message);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

单击“异步上传”时，无法正确识别设置文件。

原因

当 Windows 10 版本 1809 的 Microsoft Edge 中更改实现 FormData 时，会出现此问题。

解决方法

为了解决这个问题，请在调用 $.ajax() 之前插入以下代码，并明确跳过空条目。

// Workaround
var _data = new FormData(_form);
if (_data.entries)
{
    var data = new FormData();
    for (var p of _data)
    {
        if (p[1])
        {
            // p[1] is the value of form entry
            data.append(p[0], p[1]);
        }
    } _data = data;
}
$.ajax(
{
    type: 'post',
    url: _form.action,
    processData: false,
    contentType: false,
    data: _data,
    success: function (data, textStatus, jqXHR)
    {
        $('#message').text(data.Message);
    }
});