XMLHttpRequest kann FormData mit einem leeren Dateielement in Microsoft Edge

  • Artikel
  • 2 Minuten Lesedauer

Wichtig

Die Internet Explorer 11-Desktopanwendung wird für bestimmte Versionen von Windows 10 eingestellt und ab dem 15. Juni 2022 nicht mehr unterstützt.

Sie können mit dem Internet Explorer-Modus in Microsoft Edge weiterhin auf ältere Websites zugreifen, für die Internet Explorer erforderlich ist. Anleitung.

Die Internet Explorer 11-Desktopanwendung wird schrittweise an den schnelleren, sichereren Microsoft Edge-Browser umgeleitet und letztendlich über Windows Update deaktiviert werden. Deaktivieren von IE heute.

Dieser Artikel enthält die Problemumgehung, um das Problem zu FormData beheben, das ein leeres Dateielement enthält, das in Microsoft Edge für Windows 10, Version 1809 nicht ordnungsgemäß gesendet werden XMLHttpRequest kann.

Ursprüngliche Produktversion:   Microsoft Edge, Windows 10
Ursprüngliche KB-Nummer:   4490157

Problembeschreibung

Wenn die XMLHttpRequest ( jQuery.ajax() ) -Methode gesendet wird, kann sie nicht ordnungsgemäß ein FormData Objekt senden, das ein leeres Dateielement in Microsoft Edge für Windows 10, Version 1809 enthält.

Beispielsweise legen Sie eine Datei fest, die nur ein Dateielement und alle anderen Dateielemente leer enthält, wie im folgenden Codebeispiel gezeigt:

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

Wenn Sie auf Async Hochladen klicken, wird die Festgelegte Datei nicht richtig erkannt.

Ursache

Dieses Problem tritt auf, wenn die Implementierung FormData in Microsoft Edge für Windows 10, Version 1809 geändert wird.

Problemumgehung

Um dieses Problem zu umgehen, fügen Sie den folgenden Code ein, bevor $.ajax() er aufgerufen wird, und überspringen Sie explizit leere Einträge.

// 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);
    }
});