it-swarm.com.de

Laden Sie Dateien mit dem Feld input type = "file" hoch IE und Chrome

Ich habe einen einfachen Code, um Dateien hochzuladen:

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

Während ich auf die Eingabe klicke und dann eine Datei im Dialogfeld auswähle, übermittle ich diese Datei mit ajax. Dies ist hier nicht wichtig. Ein wichtiger Aspekt ist, dass das .change () -Ereignis in IE und Chrome nicht ausgelöst wird, obwohl ich zum zweiten Mal dieselbe Datei im Dialogfeld auswähle, direkt nach dem Senden der ersten Datei. Während ich eine andere Datei wähle, wird das Ereignis ausgelöst und funktioniert ordnungsgemäß. Unter Firefox feuert es ständig.

Wie können Sie dies umgehen, um wie erwartet zu arbeiten (wie in Firefox)?

22
jwaliszko

Beschreibung

Dies geschieht, weil sich der Wert des Eingabefelds (der ausgewählte Dateipfad) nicht ändert, wenn Sie dieselbe Datei erneut auswählen.

Sie können den Wert im Ereignis onChange() auf eine leere Zeichenfolge setzen und Ihr Formular nur senden, wenn der Wert nicht leer ist. Schauen Sie sich mein Beispiel und diese jsFiddle Demonstration an.

Probe

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

Aktualisieren

Dies funktioniert aus irgendeinem Grund in IE9 nicht. Sie können das Element ersetzen, um sie zurückzusetzen. In diesem Fall benötigen Sie jQuery live(), um das Ereignis zu binden, da Ihr Eingabefeld dynamisch (neu) erstellt wird. Dies funktioniert in allen Browsern.

Ich habe diese Lösung in der stackoverflow-Antwort gefunden. Clearing input type = 'file' mit 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" />');
});​

Mehr Informationen

Schauen Sie sich meine aktualisierte jsFiddle

Hinweis:live ist jetzt aus entfernt und wird aus späteren Versionen von jQuery entfernt. Bitte verwenden Sie on anstelle von live.

29
dknaack

Basierend auf der Antwort von dknaack lautet der Hinweis use of jquery live, um das Änderungsereignis zu binden und das Eingabefeld nach dem Absenden zurückzusetzen:

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

Das Zurücksetzen muss durchgeführt werden, nachdem das submit -Ereignis ausgeführt wurde. Wenn das Senden async ist, setzen Sie das Feld zum Beispiel in das Ereignis ajax success zurück.

$(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" />');
    }
});
1
jwaliszko