Cr�er son upload list file

**zanteskuken** · 12/12/2013, 10h59

Bonjour � tous !!!

Je suis en train de programmer un upload et souhaiterai le rendre le plus maniable possible.

C'est � dire, non pas simplement s�lectionn�s un ou plusieurs fichiers lors d'un clic, mais pouvoir cr�er une liste de fichier � t�l�charger.

Et oui, si on clic sur le bouton "parcourir" pour ajouter 2 photos, et que l'on veut en rajouter une autre qui est dans un autre dossier de son ordinateur, si l'on ne cr�� pas de liste, seul le/les derniers s�lectionner seront dan le "input type=file" et t�l�charger.

J'aimerai donc programmer mon "FileUpload" comme celui pr�sent� par JQuery.

Vous pourriez bien vous demander pourquoi je ne prends donc celui-ci.

- 1 : Je n'arrive pas � le faire fonctionner (j'ai t�l�charger le zip et fait des tests sur les diff�rentes pages fournisses (index, angular, basic, etc) et lorsque que je s�lectionnais un fichier aucun d'eux n�apparaissaient dans la liste - Preview -), alors que �a fonctionne sur leur site.

- 2 : il y a du code partout, plein de fichier JS, et c'est tr�s difficile de d�chiffrer l'int�rieur des fonctions.

- 3 : J'aimerai savoir le faire, plut�t que d'utiliser sans comprendre. (surtout que je n'arrive pas � l'impl�menter).

Voila o� J'en suis :

Html :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
<form method="POST" action={{ path('updatePicksSend') }} 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>
</div>
 
<input type="submit" name="envoyerAjax" value="Envoyer le fichier ajax" id="subFileAjax">

NB : J'ai deux boutons, un (subfile) qui envoie le formulaire directement (pour tester) et l'autre (subFileAjax) qui devrait envoyer la liste des fichiers d�sir�s.

Javascript

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
document.getElementById('fileInput').addEventListener( 'change', getFiles, false );
document.getElementById('subFileAjax').addEventListener( 'click', seeFilesAjax, false );
//Liste des fichiers sélectionnés
var fileAll = new Array();
//compteur
var cpt = 0;
 
//liste des noms de fichier
var nameFile = new Array();
var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'];
 
// Faire le preview et mettre les fichiers en liste
function getFiles(evt)
{
    var files = evt.target.files;
 
    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) 
        	{
        msg += "- " + files[i].name + " (" + files[i].size + " octets)\n";
 
        fileAll.push(files[i]);
 
               // Faire un preview
     		var reader = new FileReader;
            reader.onload = function(event) {
 
        		var nb = Math.floor(Math.random() * 1000);
 
        	    var idom ='img'+nb; 
        	    var inpt ='inpt'+cpt; 
        	    cpt++;
 
            	fileData.append(''+inpt+'', files[i]);
            	nameFile.push(inpt);
 
    		$('.classTableFiles').append("<tr><td><img id="+idom+" src="+'#'+" /></td>"+"<td><input id = "+inpt+" type="+'file'+" style='visibility: default;' value="+files[i]+" name="+inpt+"></td>"+"</tr>");
    					$('#'+idom+'')
    		            .attr('src', event.target.result)
    		            .width(130);
 
    		            var ttt=$('#'+inpt+'').attr('name');
    		            alert(ttt+" idom "+idom);
 
                       // Il faudra rajouter un bouton pour supprimer une image sélectionnée
 
 
            }; //reader onload
            reader.readAsDataURL(files[i]);
 
        	}//if allowedtypes
    }//for files
 
    // On affiche le message pour tester
    alert(msg);
 
    var msgs = "- :";
    for( var i = 0; i < fileAll.length; i++ )
    {
        msgs +=fileAll[i].name;
    }
    alert(msgs);
}

Le d�but de la fonction php qui va recevoir la liste/formulaire

PHP:

Code php :

S�lectionner tout - Visualiser dans une fen�tre � part

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

L'envoie de la liste :

=> Via xhr :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function seeFilesAjax(evt)
{
	/*var fileAj =JSON.stringify(fileAll);
	var nameFj =JSON.stringify(nameFile);
 
	var fileA = encodeURIComponent(fileAj);
	var nameF = encodeURIComponent(nameFj);*/
 
	var data = new FormData();
 
	for(var i=0, len=fileAll.length; i<len; i++) {
		data.append("filesToUpload", fileAll[i]);	
	}
 
	var xhr = getXMLHttpRequest(); //récupére un 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é !');
    };

Pb PHP : "filesToUpload" n'est pas reconnu

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

=> via Ajax

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
function seeFilesAjax(evt)
{
var data = new FormData();
	for(var i=0, len=fileAll.length; i<len; i++) {
		data.append("filesToUpload", fileAll[i]);	
	}
$.ajax({
	  url: Routing.generate('updatePicksSendF', {'filesToUplaod': data }),
	  type:'POST',
	  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);
  });
}

Pb PHP : Le test "if(!empty($_POST))" retourne "faux", aucun post n'est envoy�.

Et si je d�place "{'filesToUplaod': data}" et mets plut�t data (FormData):

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
type:'POST',
data: data,

J'ai l'erreur :

TypeError: 'append' called on an object that does not implement interface FormData.

Je pr�f�rerais ajax � xhr, ce dernier �tant moins compatible, si j'ai bien vu.

Il y a donc des successions d'erreurs, essayant plusieurs fa�on de faire/ bien faire/ mieux faire / d�j� faire !

Quelques question g�n�ral aussi :

- Suis-je bien partis dans la conception ?
- Peut-on faire ce que je souhaite ? (FileUpload de jquery semble le faire sur la d�mo de son site).
- Cr�� une liste de fichier s�lectionn�, dans javascript, est-il s�curitaire pour le client et le serveur ?
- Je r�fl�chis d�j� � pouvoir supprimer une image s�lectionn�e et int�grer une barre de progression. Feriez-vous autrement sur la notion "d'identifiant" pour retrouver le fichier � supprimer dans la liste?

NB : J'ai vu plusieurs autres Uplaoder File tout fait int�grant du flash (swf), mais je reste sceptique dessus. Sur mon ordi perso, le flash plante des fois, rarement maintenant, �a arrive (je suis sur firefox), alors je n'ai pas trop envie actuellement de partir sur cette solution. (surtout sur les vieux ordis et navigateurs)

Merci d'avoir d�j� lu.

**SpaceFrog** · 12/12/2013, 11h06

faire un upload suppose de passer par un form avec des inputs type file
de mani�re classique on ne peut pas envoyer des fichiers en ajax
le serveur doit recevois un $_FILES

si je ne m'abuse je ne vois que du string avec les noms de fichiers ...

Il existe en ajax une possibilit� avec les navigateurs r�cents d'envoyer le contenu du fichier qui sera transmis comme une chaine et qu'il faudra sauvegarder dans un fichier cot� serveur.

Le souci majeur de multiple upload vient du fait que cot� cleint un input type file n'est pas modifiable pour le faire pointer sur un fichier, on ne peut donc pas renseigner son value dynamiquement pour des raison de s�curit�.

**zanteskuken** · 13/12/2013, 15h24

Hello Grenouille de l'espace.

Merci de ce retour.

Oui tu as tout � fait raison, je saisis de mieux en mieux le principe.

Un Form avec un/des input(s) et le serveur Php re�oit dans sa variables $_FILES l'ensemble des fichiers transmit par les "inputs" � travers le "Form(ulaire)".

En revanche, non non, il n'y a pas que des noms de fichiers.

J'envoie ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
 
//la liste des fichiers sélectionnées à travers l'événement onChange
var files = evt.target.files;
...
...
//On créé une liste des fichiers => Dans la mesure de plusieurs appuie du bouton "parcourir".
for( var i = 0; i < files.length; i++ )
{
     fileAll.push(files[i]);
}
...
...
//Création d'un formData pour l'envoie à PHP
var data = new FormData();
 
	for(var i=0, len=fileAll.length; i<len; i++) {
		data.append("filesToUpload[]", fileAll[i]);	
	}
 
//envois
$.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'
	});

Donc ce n'est pas du string, mais une liste 'FileAll" que j'ajoute � ma variable "filesToUplaod" que j'ai maintenant pr�cis� en tableau [] sinon il n'aurai qu'un fichier dedans.

1 - Ceci ne marche pas

2 - En revanche, Si je modifie comme tel mon FormData:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
 
var data = new FormData();
 
	for(var i=0, len=fileAll.length; i<len; i++) {
		data.append("filesToUpload[]", fileAll[i]);	
	}
 
	data.append("kk","kk");

et l'envoi, je re�ois bien mes fichiers, et �a, je ne comprends pas pourquoi !!!
Mais j'en parle sur une autre section du Forum (Php).
Je ne pensais pas en parler ici.

Je m'�tais orient� conception d'un upload avec html/javascript.

- Je ne suis pas au courant de la m�thode d'envois d'un fichier en "string" et que PHP le re�ois et le convertit en Fichier.

Faire du ByteArray.tostring cot� JS et inverse cot� Php, c'est �a ?

�a devient cons�quent du coup. Je ne pensais pas faire ceci.

List(input.files) mieux que List (ByteArray(input.files).tostring), selon moi.

Si j'ai bien compris ce que tu disais.

- Oui tout � fait, j'avais vu qu'on ne pouvais remplir le champ "value" d'un input. Cela aurait du coup �t� plus simple peut-�tre � faire un file-upload, mais si c'est pour engendr� l'ins�curit� d'un utilisateurs, c'est inadmissible.

Oui en effet, si on prend la valeur d'un fichier et la transf�rons dans un autre input.value, �a sous entendrai qu'on connaitrai le chemin du fichier, autant dire, peut-�tre tout le disque dur. Fin, �a reste un peut flou.

OK ok, je pensais que le "input type=file" gardais en m�moire, genre un cache, le/les fichiers, genre dans un "tmp", mais bon en m�me temps �a revient au m�me, si le chemin est r�v�l�.

Je m'�tale essayant de comprendre, d�sol�.

de mani�re classique on ne peut pas envoyer des fichiers en ajax

C'est quoi " une mani�re classique" ? (De faire un list file upload)

FormData n'est pas encore assez impl�ment� ? (faut avoir un navigateur pas trop vieux j'avoue (I.E > 9).

Donc si c'est un vieux navigateur, il faut que je passe par ta solution (arrayToString), pas le choix ?

Cr�er son upload list file

JavaScript

Discussions similaires

Partager

Partager