Upload mit jQuery

Sprint

Erfahrenes Mitglied
Vergesst das ganze, ich habe den Fehler gefunden.


Hallo zusammen,

ich verarbeite inzwischen alle Formulare mit Ajax über jQuery, um das Neuladen der Seite zu verhindern. Läuft auch immer wunderbar. Nur sollen jetzt zwei Dateien mit hochgeladen werden und die gehen irgendwo verloren.
Nachdem Dateien scheinbar nicht automatisch mit den anderen Feldern mitgehen, habe ich ein Script gefunden, das per jQuery Dateien hochladen soll. Ich habe das dann angepaßt, bekomme aber immer nur diese Fehlermeldung

Can only call FormData.append on instances of FormData

Javascript:
var fd = new FormData(zertorder_form);

if ($('#hrazeiger').val() == '1') {
    var hf = $('#hra')[0].files[0];
    fd.append('hra', hf);
}
if ($('#ausweiszeiger').val() == '1') {
    var af = $('#ausweis')[0].files[0];
    fd.append('ausweis', af);
}
$.ajax({
    type: 'POST',
    url: 'putorder.php',
    cache: false,
    contentType: false,
    processData: false,
    data: fd,
    success: function (data) {
        if (data == "error") {
            $('.success_box').hide();
            $('.error_box').show();
        } else {
            $('.error_box').hide();
            $('.success_box').show();
        }
    }
});
Wo übersehe ich denn da was?
 
Zuletzt bearbeitet:
Ich habe das jetzt mal untersucht und die Version mit $.ajax habe ich leider nicht zum Laufen bekommen.

Mit fetch geht es jedoch problemlos, wenn die file-Inputs im Formular liegen werden sie ohne weiter Maßnahmen mit übertragen.
Mein Testcode:
Code:
    <form>
        <input type="file" name="hra" id="hra">
        <input type="file" name="ausweis" id="ausweis">
        <input type="text" name="text">
        <button type="submit">Los!</button>
    </form>
    <div id="out"></div>
    <script>
        const
            zertorder_form = document.querySelector('form');
        zertorder_form.addEventListener('submit', function (event) {
            event.preventDefault();

            const
                fd = new FormData(zertorder_form);
            fetch('das-script.php', {
                method: 'post',
                body: fd
            }).then(response => response.text()).then(txt => {
                document.getElementById('out').innerHTML = txt;
            });
        });
    </script>
 
Ich habe das jetzt mal untersucht und die Version mit $.ajax habe ich leider nicht zum Laufen bekommen.

Mit fetch geht es jedoch problemlos, wenn die file-Inputs im Formular liegen werden sie ohne weiter Maßnahmen mit übertragen.
Vielen Dank für deine Mühe, aber inzwischen habe ich den Fehler gefunden. Es fehlten zwei Zeilen in dem Ajax Anteil. Ich habe die Zeilen 15 und 16 oben ergänzt. War nur blöd, daß sich die Meldung auf davor liegende Anweisungen bezog.
 
Zurück