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