XMLHttpRequest no puede enviar correctamente FormData que tenga un elemento de archivo vacío en Microsoft Edge

  • Artículo
  • Tiempo de lectura: 2 minutos

Importante

La aplicación de escritorio Internet Explorer 11 está retirada y sin soporte a partir del 15 de junio de 2022 para determinadas versiones de Windows 10.

Todavía puede acceder a sitios antiguos heredados que requieren Internet Explorer con el modo Internet Explorer en Microsoft Edge. Obtenga más información.

La aplicación de escritorio Internet Explorer 11 se redirigirá progresivamente al explorador Microsoft Edge, más rápido y seguro. En última instancia, se deshabilitará a través de Windows Update. Deshabilite IE hoy.

En este artículo se proporciona la solución alternativa para solucionar el problema que contiene un elemento de archivo vacío que no se puede enviar correctamente en Microsoft Edge FormData XMLHttpRequest para Windows 10, versión 1809.

Versión del producto original:   Microsoft Edge, Windows 10
Número KB original:   4490157

Síntomas

Cuando se envía el método ( ), no se puede enviar correctamente un objeto que contenga un elemento de archivo vacío XMLHttpRequest jQuery.ajax() en Microsoft Edge para FormData Windows 10, versión 1809.

Por ejemplo, se establece un archivo que contiene un solo elemento de archivo y todos los demás elementos de archivo en blanco como en el siguiente ejemplo de código:

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

Al hacer clic en Async Upload, el archivo de conjunto no se reconoce correctamente.

Causa

Este problema se produce cuando se cambia la implementación de en Microsoft Edge FormData para Windows 10, versión 1809.

Solución alternativa

Para evitar este problema, inserte el siguiente código antes de que se llame y omita explícitamente $.ajax() las entradas vacías.

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