Cr�er son upload list file
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:
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:
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:
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:
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
Citation:
exception 'ErrorException' with message 'Notice: Undefined index: filesToUpload
=> via Ajax
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
| 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:
1
2
| type:'POST',
data: data, |
J'ai l'erreur :
Citation:
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.
