So senden Sie FormData- und String-Daten gleichzeitig mit JQuery AJAX

Gleichzeitiges Senden von FormData und String-Daten über JQuery AJAX

Die Übertragung von Dateidaten und regulären Eingabestring-Daten über eine einzige AJAX-Anfrage kann erreicht werden mit FormData(). Beispielsweise verfügen Sie möglicherweise über mehrere ausgeblendete Eingabefelder, die Sie neben den Dateidaten in die Serveranforderung einschließen möchten.

Betrachten Sie das folgende HTML-Formular:

<code class="html"><form action="image.php" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple="" />
<input type="hidden" name="page_id" value="<?php echo $page_id; ?>"/>
<input type="hidden" name="category_id" value="<?php echo $item_category->category_id; ?>"/>
<input type="hidden" name="method" value="upload"/>
<input type="hidden" name="required[category_id]" value="Category ID"/>
</form></code>

Verwenden Sie den folgenden JQuery-Code Es werden jedoch nur die Dateidaten gesendet und die versteckten Eingabedaten weggelassen:

<code class="jquery">// HTML5 form data object.
var fd = new FormData();

var file_data = object.get(0).files[i];
var other_data = $('form').serialize(); // page_id=&amp;category_id=15&amp;method=upload&amp;required%5Bcategory_id%5D=Category+ID

fd.append("file", file_data);

$.ajax({
    url: 'add.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});</code>

Der Schlüssel zur Einbindung von Datei- und String-Daten in FormData() liegt in der Änderung des JQuery-Codes wie folgt:

<code class="javascript">var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for(var i = 0;i<file_data.length;i++){
    fd.append("file_"+i, file_data[i]);
}
var other_data = $('form').serializeArray();
$.each(other_data,function(key,input){
    fd.append(input.name,input.value);
});
 $.ajax({
    url: 'test.php',
    data: fd,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){
        console.log(data);
    }
});</code>

Durch die Änderungen wurde eine for-Schleife eingeführt, die mehrere Dateieingaben verarbeitet und .serialize() in .serializeArray() ändert, um ein Array von Objekten zur Bearbeitung in einer .each()-Schleife zu erhalten, in der sich Daten befinden können an FormData() angehängt.

Das obige ist der detaillierte Inhalt vonSo senden Sie FormData- und String-Daten gleichzeitig mit JQuery AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!