javascript - habilitar - Cargar archivos usando input type="file" field con el evento.change() no siempre activando en IE y Chrome

habilitar javascript en chrome en windows

Question

Esta pregunta ya tiene una respuesta aquí:

• Método de cambio jQuery en input type = "file" 3 respuestas

Tengo un código simple para subir archivos:

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $(''form'').submit();
    });
});

<form class="attachmentsUpload" action="/UploadHandler.ashx" method="post" enctype="multipart/form-data">
    <input type="file" class="file" name="file" />
</form>

Mientras hago clic en entrada y luego selecciono un archivo en el cuadro de diálogo, estoy enviando este archivo usando ajax. Esto no es parte importante aquí. La parte importante es que, mientras selecciono el mismo archivo por segunda vez en el cuadro de diálogo, justo después de enviar el primer archivo, el evento .change () no se activa en IE y Chrome. Pero mientras elijo un archivo diferente, el evento se dispara y funciona correctamente. Con Firefox, está disparando todo el tiempo.

¿Cómo solucionar esto, para funcionar como se espera (como en Firefox)?

Answer 1

Descripción

Esto sucede porque el valor del campo de entrada (la ruta de archivo seleccionada) no cambia si selecciona el mismo archivo nuevamente.

Puede establecer el valor en el evento onChange() en una cadena vacía y enviar su formulario solo si el valor no está vacío. Eche un vistazo a mi muestra y a esta Demostración jsFiddle .

Muestra

$(".attachmentsUpload input.file").change(function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // your ajax submit
    $(".attachmentsUpload input.file").val("");
});

Actualizar

Esto, por cualquier razón, no funciona en IE9. Puede reemplazar el elemento para restablecerlos. En este caso, necesita jQuery live() para enlazar el evento, porque su campo de entrada se (re) creará dinámicamente. Esto funcionará en todos los navegadores.

Encontré esta solución en la respuesta Borrar tipo de entrada = ''archivo'' usando jQuery

$(".attachmentsUpload input.file").live("change", function () {
    if ($(".attachmentsUpload input.file").val() == "") {
        return;
    }
    // get the inputs value
    var fileInputContent = $(".attachmentsUpload input.file").val();
    // your ajax submit
    alert("submit value of the file input field=" + fileInputContent);
    // reset the field
    $(".attachmentsUpload input.file").replaceWith(''<input type="file" class="file" name="file" />'');
});​

Más información

• jQuery.live()
• jQuery.replaceWith()

Mira mi jsFiddle actualizado

Nota: jQuery.live() ahora se elimina de versiones posteriores de jQuery. Por favor use on lugar de en live .

Answer 2

Según la respuesta de dknaack, la clave es el uso de jquery live para vincular el evento de cambio y restablecer el campo de entrada después de enviar :

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $(''form'').submit();  /* sync submit */
        $(".attachmentsUpload input.file").replaceWith(''<input type="file" class="file" name="file" />'');
    });
});

El restablecimiento se debe realizar después de que se complete el evento de envío . Cuando el envío es asíncrono , reinicie el campo, por ejemplo, en un evento exitoso ajax .

$(document).ready(function () {
    $(".attachmentsUpload input.file").change(function () {
        $(''form'').submit();  /* async submit */
    });
});

.ajaxForm({
    ...
    success: function (result) {
        // reset the field - needed for IE to upload the same file second time                    
        $this.find("input.file").replaceWith(''<input type="file" class="file" name="file" />'');
    }
});