Ajax - Javascript - Upload multiple

Dernière mise à jour le par wjaouadi .


Introduction


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";
	}

NB : Il faux ajouter les deux bibliothèques prototype http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js

et ajax-upload http://github.com/valums/ajax-upload/raw/master/ajaxupload.js.

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>
		new AjaxUpload('#button2', {
                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;
                        }
                }
                });
        </script>
    </head>
    <body>
                <form action="#" method="get">
                <input id="button2" type="file">
                </form>
    </body>
</html>

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.

A voir également

Ce document intitulé « Ajax - Javascript - Upload multiple » issu de Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.