AJAX Upload vous permet de facilement télécharger plusieurs fichiers sans rafraîchir la page et utiliser n'importe quel élément pour montrer le fichier fenêtre de sélection. Il fonctionne dans tous les principaux navigateurs et à partir de la version 2.0 ne nécessite pas de bibliothèque à courir. AJAX téléchargement ne pollue pas l'espace de nommage global, il est donc compatible avec jQuery, PrototypeJS, Mootools, et d'autres bibliothèques JavaScript.
Création de l'uploader
Tout d'abord, vous devez créer le bouton. (Vous pouvez utiliser n'importe quel élément).
Exemple :
<input id="button2" type="file">
Ensuite, vous devez créer une instance upload ajax. Dans sa forme la plus simple, vous pouvez créer en utilisant le code suivant:
new AjaxUpload('#button2', {
action: 'upload.php',
onSubmit : function(file , ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
alert('Error: invalid file extension');
// cancel upload
return false;
}
}
});
Script côté serveur (upload.php)
Si vous utilisez PHP, voici un exemple le plus simple :
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo "success";
} else {
// WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
// Otherwise onSubmit event will not be fired
echo "error";
}
Téléchargement des Fichiers Multiples Génériques en Ajax
On utilisant les même bibliothéques, mais avec des autres techniques javascript
on peut faire l'upload multiple des fichiers.
1- utilisation de DOM Javascript pour créer des lignes de téléchargement.
2- Fonction EVAL Javascript pour evalué l'instance a chaque ligne génerer.
Exemple de code source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript" src="./ajaxupload.js"></script>
<script>
var count_annex = 0;
var champ_annex = "";
var annex_suivant = 0;
function add_annex(id){
annex_suivant = count_annex + 1;
var tbody = $(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
td1.appendChild(document.createTextNode("column "+annex_suivant));
var td2 = document.createElement("TD");
td2.innerHTML = '<input type="button" value = "Parcourir" id="annexadded'+count_annex+'"/>';
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
eval(new AjaxUpload('#annexadded'+count_annex, {
action: './upload.php',
onChange : function(file , ext){
if (! (ext && /^(jpg|png|jpeg|gif|txt)$/.test(ext))){
// extension is not allowed
alert('Error: invalid file extension');
// cancel upload
return false;
}
}
})
);
champ_annex = "";
count_annex++;
}
</script>
</head>
<body>
<table id="myTable" cellspacing="0" border="1">
<tbody>
</tbody>
</table>
<a href="javascript:add_annex('myTable')">Add row</a>
</body>
</html>
Cet article est régulièrement mis à jour par des experts sous la direction de Jean-François Pillou, fondateur de CommentCaMarche et directeur délégué au développement numérique du groupe Figaro.
