Wie kann ich Dateien mit jQuery asynchron hochladen?

Question

Ich möchte eine Datei asynchron mit jQuery hochladen.

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Daten hochgeladen: ");
            }
        });
    });
});

Datei

Statt die Datei hochzuladen, erhalte ich nur den Dateinamen. Was kann ich tun, um dieses Problem zu beheben?

Answer 1

Es ist eine alte Frage, aber hat noch keine korrekte Antwort, also:

Hast du jQuery-File-Upload versucht?

Hier ist ein Beispiel aus dem obigen Link, das Ihr Problem lösen könnte:

$('#fileupload').fileupload({
    add: function (e, data) {
        var that = this;
        $.getJSON('/example/url', function (result) {
            data.formData = result; // z.B. {id: 123}
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });
    } 
});

Answer 2

Sie könnten auch in Betracht ziehen, etwas wie https://uppy.io zu verwenden.

Es ermöglicht das Hochladen von Dateien, ohne die Seite zu verlassen, und bietet einige Extras wie Drag & Drop, Fortsetzen von Uploads im Falle von Browserabstürzen/schwachen Netzwerken und Importieren z.B. von Instagram. Es ist Open Source und benötigt kein jQuery/React/Angular/Vue, kann aber damit verwendet werden. Haftungsausschluss: Als Schöpfer bin ich voreingenommen ;)

Answer 3

Was wäre, wenn man Versprechen benutzt, die Ajax aufrufen und überprüfen, ob die Datei gültig und gut in Ihrem Backend gespeichert ist, damit Sie Animationen verwenden können, während der Benutzer durch Ihre Seite navigiert.

Sie können es sogar als parallelen Upload machen oder stapeln mit einem rekursiven Ansatz

Answer 4

Sie können den folgenden Code verwenden.

async: false(true)