[JavaScript] [SRC] Ajout dynamique de fichiers (Gmail style) et Upload multi fichiers

[rr404]

Salut,

Je viens de pas mal me galérer pour faire un Formulaire avec un ajout dynamique de fichiers (style Gmail -ajout et suppression-) QUI SOIT COMPATIBLE Firefox ET IE.
Désolé pour les GROSSES letters mais la vrai difficulté dans le dev Web cest que ça tourne sur un max de browser, moi mon objectif était au moins IE et FF.

à la fin je vous filerai aussi le code PHP d'un fichier à part pour récup les fichiers ainsi liés.

=========================================================

dans votre formulaire :

Code html :

1
2
3
4
5
6
7
8
<FORM action="save_files.php">
...
...
 
<div id='attDiv'> <a href="javascript:void(0)" onClick="addFile(this)" class="form1">Ajoutez un Fichier</a> </div>
 
[...]
</FORM>

=========================================================

la fonction addfile:

Code html :

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
<script language="JavaScript">
function addFile(el)
{
    d = document.getElementById("attDiv");
 
    iDiv = document.createElement("div");
 
    newAttach = document.createElement("input");
    newAttach.setAttribute("type","file");
    newAttach.setAttribute("name","fichier[]"); //notez les []
 
    iDiv.appendChild(newAttach);
 
    remLink = document.createElement("a");
    remLink.appendChild(document.createTextNode("Supprimer"));
    remLink.setAttribute("href","javascript:void(0)");
    remLink.setAttribute("onclick","remAttachment()");
    remLink.setAttribute("class","form1f");
             //ci dessous on est OBLIGE de mettre la fonction comme ça pour
             // des raisons de compatibilité IE...
    remLink.onclick=function(e){
            e=e||window.event;
 
                                      //taget = Ff   et srcElement = IE
            var theTarget = e.target || e.srcElement;
 
            child = theTarget.parentNode;    
            d = document.getElementById("attDiv");
            d.removeChild(child);        
        };
 
    iDiv.appendChild(remLink);
    d.insertBefore(iDiv,d.childNodes[0]);
}
</script>

=========================================================

voilà... Maintenant, quand vous clickez sur votre <input type="submit"> : dans save_files.php

$insertId = ... ; moi je chopais mon dernier enreg en base pour que mon n° d insert corresponde aux info du mec qui les a mise mais vous faites comme vous voulez.

Code php :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if(isset($_FILES))
    {
            $uploadPath = "./uploads";  //emplacement des uploads (si il n existe pas il faudra le créer : mkdir(uploads,0777); UNE SEULE FOIS    
            //Le nom de l input est fichier[] mais on l appel avec fichier seulement  on rajoute un [index]  à la fin
            for($i =0;isset($_FILES[fichier]["error"][$i]);$i++)//vérif si le fichier existe et qu'il n y a pas d erreur
            {
                if ($_FILES[fichier]["error"][$i] > 0)
                {
                    //echo "Return Code: " . $_FILES[fichier]["error"][$i] . "<br />";
                }
                else
                {        
                  move_uploaded_file($_FILES[fichier]["tmp_name"][$i],
                  $uploadPath . $_FILES[fichier]["name"][$i]);
 
                  $queryRecFiles = 'INSERT INTO fichier VALUES("'.$insertId.'","'.$_FILES[fichier]["name"][$i].'")';
                  mysql_query($queryRecFiles) or die (mysql_error());
                 }
            }
    }

=========================================================

Voilà, le code peu etre + clean mais n'oubliez pas que pour le "supprimer" la fonction doit etre ecrite dans le script et non un reference à un fonction exitente (pour que ca marche sous IE).

Voilà, amusez vous bien

ps: je n'ai pas relu donc la grammaire et l'orthographe doivent saigner grave... désolé.