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://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.
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.