Comment envoyer simultanément des données FormData et String à l'aide de JQuery AJAX

Envoi simultané de données de formulaire et de données de chaîne via JQuery AJAX

La transmission des données de fichier et des données de chaîne d'entrée régulière via une seule requête AJAX peut être réalisée avec FormData(). Par exemple, vous pouvez avoir plusieurs champs de saisie masqués que vous souhaitez inclure dans la requête du serveur à côté des données du fichier.

Considérez le formulaire HTML suivant :

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

Utilisation du code JQuery suivant , cependant, seules les données du fichier sont envoyées, en laissant de côté les données d'entrée masquées :

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

La clé pour inclure à la fois les données de fichier et de chaîne dans FormData() réside dans la modification du code JQuery comme suit :

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

Les modifications ont introduit une boucle for qui gère plusieurs entrées de fichiers et modifie .serialize() en .serializeArray() pour obtenir un tableau d'objets à manipuler dans une boucle .each(), où les données peuvent être ajouté à FormData().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!