In jQuery Multiple File Upload tutorial, I have covered how to implement Multiple File Upload with progress bar. I have used Upload File plugin for multiple file uploads.
Before starting the tutorial, we need to know the usage of jQuery Upload File Plugin.
jQuery Upload File Plugin Syntax:
var settings = { url: "YOUR_MULTIPE_FILE_UPLOAD_URL", method: "POST", allowedTypes:"jpg,png,gif,doc,pdf", fileName: "myfile", multiple: true, onSuccess:function(files,data,xhr) { //files: list of files uploaded //data: response from server //xhr : jquer xhr object }, onError: function(files,status,errMsg) { //files: list of files //status: error status //errMsg: error message } }; var uploadObj = $("#uploadDivId").uploadFile(settings);
url : Server URL which handles multiple file uploads.
method: Form method type. Default is “POST”.
enctype: Form enctype. Default is “multipart/form-data”.
formData: Extra data should be send with File.
allowedTypes : Allowed File extensions. Example: “jpg,png,gif”.
fileName : Input file name.
multiple : set true, for multiple file uploads.
onSuccess : this function is called when file upload is success.
onError : this function is called when file upload is failed.
Follow the below steps, to make jQuery Multiple File upload with progress-bar.
1). Add the Below code in head tag.
<link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js"></script>
2). Add a div in the body to handle file uploads.
<div id="mulitplefileuploader">Upload</div>
3). When the document is ready initialize the plugin.
var settings = { url: "YOUR_MULTIPE_FILE_UPLOAD_URL", method: "POST", allowedTypes:"jpg,png,gif,doc,pdf,zip", fileName: "myfile", multiple: true, onSuccess:function(files,data,xhr) { alert("Upload success"); }, onError: function(files,status,errMsg) { alert("Upload Failed"); } } $("#mulitplefileuploader").uploadFile(settings);
Putting It All Together: multiplefileupload.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js"></script> </head> <body> <div id="mulitplefileuploader">Upload</div> <div id="status"></div> <script> $(document).ready(function() { var settings = { url: "YOUR_MULTIPE_FILE_UPLOAD_URL", method: "POST", allowedTypes:"jpg,png,gif,doc,pdf,zip", fileName: "myfile", multiple: true, onSuccess:function(files,data,xhr) { $("#status").html("<font color='green'>Upload is success</font>"); }, onError: function(files,status,errMsg) { $("#status").html("<font color='red'>Upload is Failed</font>"); } } $("#mulitplefileuploader").uploadFile(settings); }); </script> </body>
Note: PHP code which handles multiple files is available in “Downloads”
Note: If you need more info about jQuery File Upload Plugin: https://hayageek.com/docs/jquery-upload-file.php