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.
