Réception FormData via xhr

Version imprimable

Bonjour à tous.

Un petit souci qui ne devrai être trop gros je pense au final.

Envoyer une liste de fichier sélectionné, à travers javascript, à Php.

J'aimerai Réceptionner le type "FormData" de javascript, envoyer par XmlHttpRequest.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var data = new FormData();
	for(var i=0, len=fileAll.length; i<len; i++) {
		data.append("filesToUpload", fileAll[i]);	
	}
	var xhr = getXMLHttpRequest(); //Créé xhr si possible
	xhr.open("POST", "{{ path('updatePicksSendF') }}", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	//xhr.send("fileA="+fileA+"&nameF="+nameF+"&data="+data);
	xhr.send(data);
	xhr.onload = function() {
        alert('Upload terminé !');
};

Où fileAll est la liste des fichiers ajoutés.

Code:

<input type="file" id="fileInput" name="fichier[]" multiple accept="image/*">

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var fileAll = new Array();
document.getElementById('fileInput').addEventListener( 'change', getFiles, false );
function getFiles(evt)
{
    var files = evt.target.files;
 
    // On parcourt la liste des fichiers sélectionnées
    for( var i = 0; i < files.length; i++ )
    {
    	imgType = files[i].name.split('.');
        imgType = imgType[imgType.length - 1].toLowerCase(); // On utilise toLowerCase() pour éviter les extensions en majuscules
 
        if(allowedTypes.indexOf(imgType) != -1) 
        {
 
        fileAll.push(files[i]);
 
//etc...

La réception coté PHP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
updatePicksSendFAction ()
{
if(!empty($_POST))
{
	// On verifie si le champ est rempli
	//$objILOC = json_decode(stripslashes($_POST['fileA']));
	$objILOC = $_FILES['filesToUpload'];
	for ($i=0; $i<count($objILOC); $i++)
	{
		$logger->info('UpdateAccountController - updatePicksSendF files : '.$objILOC[$i]['name']);
	}
// etc..

Erreur :

Citation:

updatePicksSendF : exception 'ErrorException' with message 'Notice: Undefined index: filesToUpload

Je reçois bien quelque chose, en autre une envoi POST, mais la variable/objet "filesToUplaod" n'est pas reconnu.

Qu'est ce que j'ai oublié ?

Merci

12/12/2013, 10h09
Bovino

Code:

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

:nono:

Pour des fichiers, il faut que le Content-Type soit multipart/form-data.

Oh oui tu as raison, Merci de cette remarque. J'avais lu ça dans un tutorial et j'ai oublié de le spécifier.

En revanche le problème n'est pas résolu et je trouve quelques éléments étranges.

Explication :

Le code avec xhr :
Code:

1 2 3 4 5 6 7 8 9 10 var fileData = new FormData(); for(var i=0, len=fileAll.length; i<len; i++) { //fileAll est la liste de fichiers => fileAll.push(files[i]); fileData.append("filesToUpload[]", fileAll[i]); } var xhr = getXMLHttpRequest(); var serv = Routing.generate('updatePicksSendF'); xhr.open('POST', serv, true); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.send(fileData);
La requête est bien envoyé à Php mais celui-ci me dis que la variable $_POST est vide. (le problème initiale).

J'essaye avec un envoie Ajax comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var fileData = new FormData(); for(var i=0, len=fileAll.length; i<len; i++) { fileData.append("filesToUpload[]", fileAll[i]); } $.ajax({ url: Routing.generate('updatePicksSendF'), type:'POST', data: fileData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType dataType: 'json' }) .done(function(json) { var inf = json.info; if(inf == "") { alert(json.message); } }) .fail(function(json){ //json = JSON.parse(json); alert(json.info+" -- "+json.message); var inf = json.result; alert('Erreur: '+inf); });
Même résultat.

HORS !!!!

si je rajoute cette ligne :
Code:

1 2 3 4 5 var fileData = new FormData(); for(var i=0, len=fileAll.length; i<len; i++) { fileData.append("filesToUpload[]", fileAll[i]); } fileData.append("kk","kk");
J'ajoute n'importe quoi en gros.

Je reçois bien mes fichiers sélectionnés.

Je reste incompris. Qu'est ce qui se passe ?

Erreur de structure "FormData" ? i.e. ?

ce "bidouillage" ne fonctionne pas avec xhr.

Du coup je me pose deux question.

- 1 : J'ai vu plusieurs tutos pour envoyer un formdata via xhr et c'est toujours la même syntaxe, donc je ne comprends pas en quoi la mienne est fausse.

- 2 : Pourquoi rajouter un champs "hasardeux" à FormData pour qu'il puisse être "Lisible" par PHP ?

Je ne saisis pas oui.

13/12/2013, 14h56
Bovino

Les fichiers sont supposés être récupérés via le tableau $_FILES, pas $_POST. :?

Oui, j'avais saisi la nuance. Je suis désolé d'avoir mal expliqué du coup.

J'ai bien du côté Php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// On vérifie si le Formulaire est rempli
if(!empty($_POST))
{
	$objILOC = $_FILES['filesToUpload'];
        // Il y a t-il des fichiers ?
        if(!empty($objILOC))
	{
                // On restructure Notre Objet pour qu'il soit mieux présenté à l'utilisation
           	$files_array = $this->reArrayFiles($objILOC);
		$file_count = count($files_array);
		for ($i=0; $i<$file_count; $i++) 
		{
			$file_array = $files_array[$i];
			if( !empty($file_array['name']) )
			{
				// Récupération de l'extension du fichier
				$extension = pathinfo($file_array['name'], PATHINFO_EXTENSION);
				// On vérifie l'extension du fichier
				if(in_array(strtolower($extension),$tabExt))
				{
etc..
...
...
move
 
etc.
...
 
private function reArrayFiles($file_post) 
{
	$file_ary = array();
	$file_count = count($file_post['name']);
	$file_keys = array_keys($file_post);
	for ($i=0; $i<$file_count; $i++) {
		foreach ($file_keys as $key) {
			$file_ary[$i][$key] = $file_post[$key][$i];
		}
	}
	return $file_ary;
}

Je test juste si j'ai un contenu envoyé par $_post
Puis si j'ai des fichiers par $_Files

C'est vrai que je ne l'avais pas affiché dans le sujet, sorry.

C'est ce problème d'envoi qui est étrange.

13/12/2013, 15h55
Bovino

Citation:

Oui, j'avais saisi la nuance.

Manifestement pas tant que ça... :aie:

Citation:

Je test juste si j'ai un contenu envoyé par $_post

Bah oui... mais si tu n'envoies que des fichiers, tu n'auras rien dans $_POST. C'est pour ça que tu ne récupères tes fichiers que si tu envoies des données factices.
Encore une fois, c'est $_FILES qu'il faut tester pour savoir si tu as reçu des fichiers.

Huuuuuuuu :aie:

Je n'ai pas maitrisé ce que j'envoyais -_-

Bah oui, tu as tout à fais raison, j’envoie des fichiers donc j'aurai rien dans $_POST.

Je faisais ce test avant car j'envoyais un form
Code:

1 2 3 4 5 6 7 8 9 10 <form method="POST" action={{ path('updatePicksSendF') }} enctype="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="20000000"> <label>Fichier :</label> <input type="file" id="fileInput" name="fichier[]" multiple accept="image/*"> <table id="tableFiles" style="{background-color:red, width:400px, height:400px}"> <tbody class="classTableFiles"></tbody> </table> <div class="adhesion_button"> <input type="submit" name="envoyer" value="Envoyer le fichier" class="next_step" id="subFile"> </div> </form>
Et dedans il n'y a pas que des fichiers "fichier[]".

Ok ok.

J'ai donc enlever la condition

Code:

if(!empty($_POST))

Du coup je réceptionne mes fichiers. Ah mince alors, c'est étourdit ça.

Quand à ce mystère xhr, je n'ai pas encore trouvé.