JQuery – impossible de transmettre formData avec d’autres parameters

J’essaie de transmettre formData avec d’autres parameters à un script PHP.

En utilisant la méthode $ .post, je recevais une erreur ‘Invocation illégale’. J’ai donc abandonné la méthode $ .post au profit de la méthode $ .ajax.

Comme suit:

$('#uploadBtn').on('click', function() { var formData = new FormData($('#uploadfile')[0]); // the form data is uploaded file var booking = $('#bookingNum').val(); var partner = $('#partnerCode').val(); var parameters = { formData:formData, booking:booking, partner:partner } $.ajax({ url: 'process/customer.php', data: parameters, // <- this may be wrong async: false, contentType: false, processData: false, cache: false, type: 'POST', success: function(data) { console.log(data); }, error: function(jqHHR, textStatus, errorThrown) { console.log('fail: ' + errorThrown); } }); }); 

Du côté de PHP, j’essaie d’obtenir l’object parameters comme suit:

  

Fondamentalement, je télécharge un fichier à enregistrer dans un répertoire. Mais le problème est que je ne peux rien envoyer du côté de PHP. Je reçois cet avertissement:

jquery.js: 2 [Obsolète] XMLHttpRequest synchrone sur le thread principal est obsolète en raison de ses effets néfastes sur l’expérience de l’utilisateur final. Pour plus d’aide, consultez https://xhr.spec.whatwg.org/ .”

Je dois pouvoir envoyer l’object ‘parameters’ au script PHP, puis y accéder pour le traitement.

Comment puis-je atteindre cet objective avec la méthode $ .ajax? Alors, comment puis-je accéder à formData une fois du côté de PHP?

Les parameters sont l’object que vous POSTing . les paires clé-valeur seront basées sur ses propriétés. Essayez d’y accéder comme $_POST['formData'] et $_POST['booking'] .

Aussi … veuillez retravailler votre code pour supprimer l’ async:false … TBH, cela n’aurait jamais dû être mis dans jQuery et est absolument terrible. Ne vous sentez pas mal, c’est la première chose que chaque nouveau venu essaie de faire lorsqu’il commence à utiliser ajax, moi-même inclus. Vous allez laisser le thread d’interface utilisateur se bloquer pendant toute la durée, empêchant ainsi toute interaction de l’utilisateur pendant l’appel.

EDIT Je ne savais pas que vous essayiez de poster un fichier au début, alors ce n’est pas une réponse complète, car je ne pense pas que vous y accédez correctement. Mais la partie importante de cette réponse est qu’il n’existe aucun index de parameters de $_POST (ce qui explique pourquoi même votre écho “hello” ne revient pas).

si vous postez un object qui ressemble à

 { key1 : "value1", key2 : "value2" } 

ils vont passer à php comme

 $_POST['key1'];//"value1"; $_POST['key2'];//"value2"; 

Il est important de noter que les fichiers publiés sur le serveur se trouvent généralement dans le superglobal $ _FILES. (Je ne sais pas si AJAX change cela, mais j’imagine que non)

EDIT2

La combinaison des deux … c’est l’idée générale. Faites que votre HTML + JS ressemble à …

 $('#form').on('submit', function() { var form_data = new FormData(); form_data.append("file", document.getElementById('fileInput').files[0]); var booking = $('#bookingNum').val(); var partner = $('#partnerCode').val(); form_data.append("booking ",booking); form_data.append("partner",partner); $.ajax({ url: 'process/customer.php', method:"POST", data: form_data, contentType: false, cache: false, processData: false, success: function(data) { console.log(data); }, error: function(jqHHR, textStatus, errorThrown) { console.log('fail: ' + errorThrown); } }); return false;//prevent default form submission }); 
 
 $('#uploadBtn').on('click', function() { var form_data = new FormData(); form_data.append("file", document.getElementById('ID').files[0]); var booking = $('#bookingNum').val(); var partner = $('#partnerCode').val(); form_data.append("booking ",booking); form_data.append("partner",partner); $.ajax({ url: 'process/customer.php', method:"POST", data: form_data, contentType: false, cache: false, processData: false, success: function(data) { console.log(data); }, error: function(jqHHR, textStatus, errorThrown) { console.log('fail: ' + errorThrown); } }); });