AJAX Multiple File Upload Form Using jQuery ...

Multiple file upload forms are sometimes essential for your web application but managing upload from multiple file input boxes becomes a bit tedious and lengthy. But thanks to jQuery using which we can make this task easier too. Today I’m going to create an AJAXified multiple file upload form that uses a lot lesser server side code and also provides a very nice user interface.

For this tutorial, i’ll be using latest version of jQuery and Ajax upload library by Andrew Valums. Grab both libraries and add them to your page header

The HTML Structure

As i said, the upload form will be intuitive, we won’t be using the classic File input box. So, First of all create the upload button on which user will click to open the File Selection dialog.
view plaincopy to clipboardprint?

   1. <div id="upload" >Upload File</div> 

<div id="upload" >Upload File</div>

You can use any element you want for the button. I just applied some basic style to this div, you can apply any style you wish to make it look more attractive.

   1. #upload{ 
   2.     margin:30px 200px; padding:15px; 
   3.     font-weight:bold; font-size:1.3em; 
   4.     font-family:Arial, Helvetica, sans-serif; 
   5.     text-align:center; 
   6.     background:#f2f2f2; 
   7.     color:#3366cc; 
   8.     border:1px solid #ccc; 
   9.     width:150px; 
  10.     cursor:pointer !important; 
  11.     -moz-border-radius:5px; -webkit-border-radius:5px; 
  12. } 

#upload{
 margin:30px 200px; padding:15px;
 font-weight:bold; font-size:1.3em;
 font-family:Arial, Helvetica, sans-serif;
 text-align:center;
 background:#f2f2f2;
 color:#3366cc;
 border:1px solid #ccc;
 width:150px;
 cursor:pointer !important;
 -moz-border-radius:5px; -webkit-border-radius:5px;
}

I also added a span element next to upload button to show various messages during processing. And to show the uploaded files to the user, i added an unordered list next to the button. Here’s the complete html code.

   1. <!-- Upload Button--> 
   2. <div id="upload" >Upload File</div><span id="status" ></span> 
   3. <!--List Files--> 
   4. <ul id="files" ></ul> 

<!-- Upload Button-->
<div id="upload" >Upload File</div><span id="status" ></span>
<!--List Files-->
<ul id="files" ></ul>

The PHP Code

To upload the files to server, here’s a basic file uploading script in PHP that displays ’success’ if file uploaded successfully otherwise displays ‘error’.

upload-file.php
view plaincopy to clipboardprint?

   1. <?php 
   2. $uploaddir = ./uploads/; 
   3. $file = $uploaddir . basename($_FILES[uploadfile][ ame]);  
   4.  
   5. if (move_uploaded_file($_FILES[uploadfile][ mp_name], $file)) { 
   6.   echo "success"; 
   7. } else { 
   8.     echo "error"; 
   9. } 
  10. ?> 

<?php
$uploaddir = ./uploads/;
$file = $uploaddir . basename($_FILES[uploadfile][ ame]);

if (move_uploaded_file($_FILES[uploadfile][ mp_name], $file)) {
  echo "success";
} else {
 echo "error";
}
?>

The JavaScript Code

And lastly the javascript part. The AJAX Upload library you included earlier will do all the heavy lifting for you. Here’s the JavaScript Code you’ll need.
view plaincopy to clipboardprint?

   1. $(function(){ 
   2.     var btnUpload=$(#upload); 
   3.     var status=$(#status); 
   4.     new AjaxUpload(btnUpload, { 
   5.         action: upload-file.php, 
   6.         //Name of the file input box 
   7.         name: uploadfile, 
   8.         onSubmit: function(file, ext){ 
   9.             if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
  10.                   // check for valid file extension 
  11.                 status.text(Only JPG, PNG or GIF files are allowed); 
  12.                 return false; 
  13.             } 
  14.             status.text(Uploading...); 
  15.         }, 
  16.         onComplete: function(file, response){ 
  17.             //On completion clear the status 
  18.             status.text(); 
  19.             //Add uploaded file to list 
  20.             if(response==="success"){ 
  21.                 $(<li></li>).appendTo(#files).html(<img src="./uploads/+file+" alt="" /><br />+file).addClass( isuccess); 
  22.             } else{ 
  23.                 $(<li></li>).appendTo(#files).text(file).addClass(error); 
  24.             } 
  25.         } 
  26.     }); 
  27. }); 

$(function(){
 var btnUpload=$(#upload);
 var status=$(#status);
 new AjaxUpload(btnUpload, {
  action: upload-file.php,
  //Name of the file input box
  name: uploadfile,
  onSubmit: function(file, ext){
   if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                  // check for valid file extension
    status.text(Only JPG, PNG or GIF files are allowed);
    return false;
   }
   status.text(Uploading...);
  },
  onComplete: function(file, response){
   //On completion clear the status
   status.text();
   //Add uploaded file to list
   if(response==="success"){
    $(<li></li>).appendTo(#files).html(<img src="./uploads/+file+" alt="" /><br />+file).addClass( isuccess);
   } else{
    $(<li></li>).appendTo(#files).text(file).addClass(error);
   }
  }
 });
});

Code explanation: to use the AJAX Upload library we need to initialize the AjaxUpload object and provide it with parameters. The first parameter is the id of the button element on which the user will click and second is the server side script that’ll handle file upload. The second parameter can accept an array of various options to give you more control over the process.

And that’s exactly what i’ve done.

    * The action field is the path to server side script,
    * name is the name of file input box(hidden) which will be used for upload. If you change this value, make sure to change the server side script corresspondinly.
    * onSubmit lets you perform some function before the file is uploaded e.g. you can check the file extension like i’ve done above or show a status message.
    * onComplete lets you perform some action after the upload is complete e.g. I’ve shown the uploaded image to the user.

And if you want to limit the number of files that a user can upload at a time, simply use this.disable() within onSubmit or onComplete to disable the upload button after checking for some condition.

Note: The file upload using AJAX is not true ajax as it uses hidden iframe to upload the form data but his whole process is transparent by using the AJAX Upload library and gives a feel of AJAXified file upload.

 Original Source:
http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/