N’en déplaise à certain qui vous conseillerons d’utiliser des outils flash pour vous permettre l’envoi de multiples fichiers , je vous présente une solution pour vous permettre d’envoyer un fichier sans être dépendant de Flash. De plus, je précise et cela pour François que sa première solution ne fonctionne qu’avec Php.
Cette solution va vous permettre d’envoyer un fichier au serveur sans recharger votre page.
Typiquement, il s’agit d’un comportement Ajax, alors pourquoi ne pas utiliser cette « technologie ». Tout simplement parce qu’Ajax utilise javascript qui se charge de récupérer les données afin de les envoyer par l’objet XHRHttpRequest.Pour des raisons de sécurité évidentes, javascript n’est pas autorisé à lire un fichier contenu sur votre disque dur, il se retrouve donc dans l’incapacité de récupérer un fichier pour l’envoyer au serveur.
Il faut donc utiliser la seule solution possible(hormis celles proposées par François), c’est à dire le champ input type= »file » dans un formulaire. Pour permettre au formulaire d’envoyer des fichiers, il faut ajouter un enctype= »multipart/form-data » pour lui indiquer d’envoyer les données au format binaire.Cette action a pour conséquence de recharger la page.
Pour éviter de recharger la page, il existe une solution qui permet d’envoyer le formulaire par l’intermédiaire d’une iframe cachée. Le fichier peut ainsi être envoyé au serveur, l’iframe se recharge, mais notre page principale reste intact.
<form action="importation.html" enctype="multipart/form-data" method="post" target="hiddenmyiframe">
<input type="file" id="file" name="file"/>
<input type="submit" value="Envoyer mon Fichier sans rechargement" />
</form>
<iframe id="hiddenmyiframe" style="display:none;"/>
Cette solution est utilisable sans l’intervention de javascript. Il n’y a donc aucun moyen de savoir si le fichier a correctement été envoyé, ni même avoir le code de retour du serveur.
Alors le Mac Gyver de la Bidouille Informatique a trouvé une solution. Il suffit d’ajouter un évenement onload sur la page appelé dans l’iframe et de paramètrer la fonction appelée ou ses paramètres en fonction du code de retour du serveur
Le serveur doit donc retourner le code html suivant
<html>
<body onload="parent.mafonction('arg1','arg2','etc')">
</body>
</html>
Le parent.mafonction permet d’appeler la fonction javascript de la fenetre parent. Ce code html même si il est masqué sera exécuté par votre navigateur.
Vous pouvez également utiliser javascript pour créer automatiquement l’iframe. La fonction suivante doit être appelé au submit du formulaire.
<form action="importation.html" enctype="multipart/form-data" method="post" onsubmit="return submitFichier(this)">
Et le code javascript
function submitFichier(formulaire){
var iframe;
if(!document.getElementById('hiddenuploadiframe')){
iframe=document.createElement("iframe");
iframe.setAttribute("name","hiddenuploadiframe");
iframe.setAttribute("id","hiddenuploadiframe");
iframe.style.display="none";
formulaire.parentNode.insertBefore(iframe,formulaire);
}else{
iframe=document.getElementById('hiddenuploadiframe');
}
formulaire.setAttribute("target","hiddenuploadiframe");
return true;
}