KillABug
KillABug

Reputation: 1414

Uploading multiple files using jquery file uploader and PHP

I am working on a web application in php mysql.Here,the requirement says,that the user should be able to upload more than one files at a time,to store them on server.Currently I can upload a single file using this,

 $(function(){
var btnUpload=$("#uploadPdf");
new AjaxUpload(btnUpload, {
    action:"uploadPdf.php",
    name: "uploadCertPdf",
    onSubmit: function(file, ext){
         if (!(ext && /^(pdf)$/.test(ext))){ 
            alert("Upload File (Supports PDF formats only)");
            return false;
        }           
        var stats = $("#resultsOuter");
        stats.html('<img src="images/layout/preloader-2.png" />');
    },
    onComplete: function(file, response){
            alert(response);
            alert("File uploaded successfully");
            window.location="somePage.php";

    }
  })
  });        

 /**somePage.php file**/

  if (isset($_FILES["uploadCertPdf"]))
  {
  if ($_FILES["uploadCertPdf"]["error"] > 0)
  {
      echo "Error: " . $_FILES["uploadCertPdf"]["error"] . "<br />";
  }
else
  {
       if(!is_dir($_SERVER['DOCUMENT_ROOT']."admin/pdf/"))
     {  echo "not found";
        mkdir($_SERVER['DOCUMENT_ROOT']."admin/pdf/", 0777,true);
     } 
         if(file_exists($file))
        {   echo "duplicate";
            $flag = TRUE;
        }
        else
        { 
            $uploaddir = '/admin/pdf/';
            $uploadfile = $uploaddir . basename($_FILES['uploadCertPdf']['name']);
            $path_info = pathinfo($_FILES['uploadCertPdf']['name']);
            $type= $path_info['extension']; 
            if($type == 'pdf')
            {   

                $flag = move_uploaded_file($_FILES['uploadCertPdf']['tmp_name'],$uploadfile);

            }else{
                echo "You can upload only PDF files";
                }
        }

      }
   }

How can I customize it to upload multiple files at a time?I tried to search,but all plugins are customized to use some user interface,i.e they have their own independent modules and functionalities.
So,any help with this would be appreciated.Thanks for the time. EDIT: I am adding the ajax uploader function that creates a file input dynamically.

    /**
 * Creates invisible file input above the button 
 **/
_createInput : function(){
    var self = this;
    var input = d.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('name', this._settings.name);
    input.setAttribute('id', 'file'+this._settings.name);
    var styles = {
        'position' : 'absolute'
        ,'margin': '-5px 0 0 -175px'
        ,'padding': 0
        ,'width': '220px'
        ,'height': '30px'
        ,'fontSize': '14px'                             
        ,'opacity': 0
        ,'cursor': 'pointer'
        ,'display' : 'none'
        ,'zIndex' :  2147483583 //Max zIndex supported by Opera 9.0-9.2x 2147483583 
        // Strange, I expected 2147483647   
    };

I tried by adding an array to the name attribute,but did not work.

Upvotes: 0

Views: 8357

Answers (2)

user553180
user553180

Reputation: 626

I just completed a multi-file upload functionality on a Grails project, using this article as a guide (which is based on PHP). If you want to roll your own - it's a great reference.

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Upvotes: 1

Nitesh Agarwal
Nitesh Agarwal

Reputation: 211

You can use Jquery Plugin available at http://blueimp.github.com/jQuery-File-Upload/ for multiple file upload at a time.

Upvotes: 1

Related Questions