Téléchargement de données et de fichiers sous une forme à l'aide d'Ajax?

J'utilise jQuery et Ajax pour que mes formulaires soumettent des données et des fichiers, mais je ne sais pas comment envoyer les données et les fichiers sous une forme unique?

Je fais actuellement presque la même chose avec les deux méthodes, mais la façon dont les données sont rassemblées dans un tableau est différente, les données utilisent .serialize(); Mais les fichiers utilisent = new FormData($(this)[0]);

Est-il possible de combiner les deux méthodes pour pouvoir télécharger des fichiers et des données sous une forme par Ajax?

Data jQuery, Ajax et 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> 

Fichiers jQuery, Ajax et 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> 

Comment puis-je combiner ce qui précède pour pouvoir envoyer des données et des fichiers sous une forme via Ajax?

Mon objectif est de pouvoir envoyer tout ce formulaire dans un post avec Ajax, est-ce possible?

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

Le problème que j'ai eu était d'utiliser le mauvais identifiant jQuery.

Vous pouvez télécharger des données et des fichiers sous un formulaire en utilisant ajax .

PHP + HTML

 <? print_r($_POST); print_r($_FILES); ?> <form id="data" 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> 

JQuery + Ajax

 $("form#data").submit(function(){ var formData = new FormData(this); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); 

Version courte

 $("form#data").submit(function() { var formData = new FormData(this); $.post($(this).attr("action"), formData, function(data) { alert(data); }); return false; }); 

Une autre option consiste à utiliser un iframe et à définir la cible du formulaire.

Vous pouvez essayer ceci (il utilise jQuery):

 function ajax_form($form, on_complete) { var iframe; if (!$form.attr('target')) { //create a unique iframe for the form iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body')); $form.attr('target', iframe.attr('name')); } if (on_complete) { iframe = iframe || $('iframe[name=" ' + $form.attr('target') + ' "]'); iframe.load(function () { //get the server response var response = iframe.contents().find('body').text(); on_complete(response); }); } } 

Il fonctionne bien avec tous les navigateurs, vous n'avez pas besoin de sérialiser ou de préparer les données. Un inconvénient, c'est que vous ne pouvez pas surveiller les progrès.

Également, au moins pour chrome, la demande n'apparaîtra pas dans l'onglet "xhr" des outils du développeur, mais sous "doc"

Ou plus court:

 $("form#data").submit(function() { var formData = new FormData($(this)[0]); $.post($(this).attr("action"), formData, function() { // success }); return false; });