Ajax - Javascript - Multiple upload

December 2016

Uploading multiple files is a major task for webmasters, which consumes a lot of time and requires proper software. AJAX provides a simple and convenient way to upload many bits of information by not once again loading the full page. It is simpler to view activity as AJAX is executed by HTML documents. To create the Ajax function you must have JavaScript and Basic HTML knowledge. AJAX Upload allows for the easier download of multiple files with no page refreshing and a file selection window can be seen by opting for any webmaster tool or element. AJAX runs on all main browsers, and the AJAX 2.0 doesn't require any library files; just download it, and run. AJAX is compatible with major JavaScript libraries as jQuery, PrototypeJS, and webmaster Mootools.


Introduction


AJAX Upload allows you to easily download multiple files without refreshing the page and use any element to show the file selection window. It works for all major browsers and as from version 2.0, it does not require libraries to run. AJAX download does not pollute the global namespace, so it is compatible with jQuery, PrototypeJS, Mootools, and other JavaScript libraries.

Creating the upload


First, you must create the button (you can use anything).

Example:
<input id="button2" type="file">


Then you must create an instance to upload Ajax. In its simplest form, you can create using the following code:

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

Server side script (upload.php)


If you use PHP, here's a simple example:

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



Note that: you must add two libraries prototype http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js and Ajax-upload http://github.com/valums/ajax-upload/raw/master/ajaxupload.js.

Example source code:

 <!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>  

Downloading mutiple files (Ajax)


Using the same library, but with other javascript techniques we can upload multiple files.

1 - Using JavaScript DOM to create lines of downloading.

2 - JavaScript function (EVAL) to evaluate instance of each line being generated.

Example source code:

<!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>  

Notes


Thanks to wjaouadi for this tip.

Related :

This document entitled « Ajax - Javascript - Multiple upload » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.