Les Allergies
Alimentaires

Ajax - Javascript - Upload multiple



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>
Publié par wjaouadi - Dernière mise à jour le 26 novembre 2009 à 10:48 par wjaouadi
Ce document intitulé « Ajax - Javascript - Upload multiple » issu de CommentCaMarche (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.
Utilisation de l'objet XMLHttpRequest Utilisation de l'objet XMLHttpRequest
Suggestions
  •  Ajax - Javascript - Upload multiple
  •  [PHP | Javascript] upload image (Résolu) » Meilleure réponse: Voilà un script d'upload : <? // Récupération du dossier dans lequel le fichier sera uploadé $DESTINATION_FOLDER = 'upload/' ; // Taille maximale de fichier, valeur en bytes $MAX_SIZE = 50000000 ; // Définitio
  •  Javascript: les opérateurs » Articles : Qu'est-ce qu'un opérateur' Les opérateurs sont des symboles qui permettent de manipuler des variables, c'est-à-dire effectuer des opérations, les évaluer, ... On distingue plusieurs types d'opérateurs : Les opérateurs de calcul Les...
  •  AJAX (Asynchronous Javascript And XML) » Articles : Introduction à AJAX AJAX (Asynchronous Javascript And XML, traduisez Javascript asynchrone et XML) est une méthode de développement web basée sur l'utilisation d'un script Javascript pour effectuer des requêtes web à l'intérieur d'une page web...
  •  [html] envoi de multiples fichiers (upload) (Résolu) » Meilleure réponse: <INPUT name="file[]" type='file' multiple='multiple' /> un seul suffit ( touche ctrl appuyer : api s'en charge ( touche shift aussi) )
  •  [AJAX] Problème de compatibilité IE (Résolu) » Meilleure réponse: Sous IE il faut appeller la fonction : header("Cache-Control: no-cache"); au debut de votre fichier php. Ou alors mettre la meta balise equivalente. Sinon il ne mettra pas a jour les appels apres le premier. J'avais le meme probleme, av
Plus
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?
Utilisation de l'objet XMLHttpRequest
Utilisation de l'objet XMLHttpRequest