Quelques mots de remerciements seront grandement appréciés.

Ajax - Javascript - Upload multiple

Introduction
Création de l'uploader
Script côté serveur (upload.php)
Téléchargement des Fichiers Multiples Génériques en Ajax

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>