Hochladen von Daten und Dateien in einem Formular mit Ajax?

Question

Ich benutze jQuery und Ajax für meine Formulare, um Daten und Dateien zu übermitteln, aber ich bin nicht sicher, wie man sowohl Daten als auch Dateien in einem Formular sendet?

Ich tue derzeit fast das Gleiche mit beiden Methoden, aber die Art und Weise, in der die Daten in einem Array gesammelt werden, ist anders, die Daten verwenden .serialize(); aber die Dateien verwenden = new FormData($(this)[0]);

Ist es möglich, beide Methoden zu kombinieren, um Dateien und Daten in einem Formular über Ajax hochladen zu können?

Daten jQuery, Ajax und html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

Dateien jQuery, Ajax und html

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Wie kann ich die oben genannten Punkte kombinieren, so dass ich Daten und Dateien in einem Formular über Ajax senden kann?

Mein Ziel ist es, in der Lage sein, alle diese Form in einem Beitrag mit Ajax zu senden, ist es möglich?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Answer 1

In meinem Fall musste ich eine POST-Anfrage stellen, bei der Informationen über die Kopfzeile und eine Datei über ein FormData-Objekt gesendet wurden.

Ich machte es mit einer Kombination von einigen der Antworten hier, so im Grunde, was endete Arbeit war mit diesen fünf Zeilen in meinem Ajax-Anforderung:

 contentType: "application/octet-stream",
 enctype: 'multipart/form-data',
 contentType: false,
 processData: false,
 data: formData,

Wobei formData eine Variable war, die wie folgt erstellt wurde:

 var file = document.getElementById('uploadedFile').files[0];
 var form = $('form')[0];
 var formData = new FormData(form);
 formData.append("File", file);

Answer 2

Sie können sie einfach an Ihre formdata anhängen, Ihre Dateien und Daten darin einfügen, Sie können dies lesen.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

Zum besseren Verständnis können Sie $_FILES für Ihre Dateien und $_POST für Ihre Daten separat abrufen.

Answer 3

<form id="form" method="post" action="otherpage.php" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button type='button' id='submit_btn'>Submit</button>
</form>

<script>
$(document).on("click", "#submit_btn", function (e) {
    //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
    var formData = $("#form").submit(function (e) {
        return;
    });
    //formData[0] contain form data only 
    // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
    var formData = new FormData(formData[0]);
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: formData,
        success: function (response) {
            console.log(response);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

///// otherpage.php

<?php
    print_r($_FILES);
?>