Github Download


jQuery Upload File Plugin Demo

jQuery File UPload plugin provides Multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin, So Github contains source code with and without Form plugin.

1). Add the CSS and JS files in the head sections 
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>

2). Add a div to body to handle file uploads 
<div id="fileuploader">Upload</div>

3). Initialize the plugin when the document is ready. 
<script>
$(document).ready(function()
{
	$("#fileuploader").uploadFile({
	url:"YOUR_FILE_UPLOAD_URL",
	fileName:"myfile"
	});
});
</script>

Thats it. jQuery Ajax File uploader with progress bar is ready now.

Jquery File Upload

Source: 
$("#singleupload1").uploadFile({
	url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php"
	});
Output:
Upload



Jquery File Upload with File Restrictions

Source: 
$("#singleupload2").uploadFile({
url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
allowedTypes:"png,gif,jpg,jpeg",
fileName:"myfile"
});
Output:
Upload

Jquery Advanced File Upload

Source: 
var uploadObj = $("#advancedUpload").uploadFile({
url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
multiple:true,
autoSubmit:false,
fileName:"myfile",
formData: {"name":"Ravi","age":31},
maxFileSize:1024*100,
maxFileCount:1,
dynamicFormData: function()
{
	var data ={ location:"INDIA"}
	return data;
},
showStatusAfterSuccess:false,
dragDropStr: "<span><b>Faites glisser et déposez les fichiers</b></span>",
abortStr:"abandonner",
cancelStr:"résilier",
doneStr:"fait",
multiDragErrorStr: "Plusieurs Drag & Drop de fichiers ne sont pas autorisés.",
extErrorStr:"n'est pas autorisé. Extensions autorisées:",
sizeErrorStr:"n'est pas autorisé. Admis taille max:",
uploadErrorStr:"Upload n'est pas autorisé"

});
$("#startUpload").click(function()
{
	uploadObj.startUpload();
});

Output:
Téléchargez


Start Upload


Jquery Delete File Option

$("#deleteFileUpload").uploadFile({
 url: "upload.php",
 dragDrop: true,
 fileName: "myfile",
 returnType: "json",
 showDelete: true,
 deleteCallback: function (data, pd) {
     for (var i = 0; i < data.length; i++) {
         $.post("delete.php", {op: "delete",name: data[i]},
             function (resp,textStatus, jqXHR) {
                 //Show Message	
                 alert("File Deleted");
             });
     }
     pd.statusbar.hide(); //You choice.
}
 });
Output:
File Upload (Delete)

Jquery Multiple File Upload

Source: 
$("#multipleupload").uploadFile({
url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
multiple:true,
fileName:"myfile"
});

Output:
Upload

Jquery Upload File Events

Source: 
$("#eventsupload").uploadFile({
url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
multiple:true,
fileName:"myfile",
onSubmit:function(files)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Submitting:"+JSON.stringify(files));
},
onSuccess:function(files,data,xhr)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Success for: "+JSON.stringify(data));
	
},
afterUploadAll:function()
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>All files are uploaded");
	
},
onError: function(files,status,errMsg)
{
	$("#eventsmessage").html($("#eventsmessage").html()+"<br/>Error for: "+JSON.stringify(files));
}
});

Output:
Upload
Events:

Hide Cancel,Abort,Done Buttons

Source: 
$("#stylingupload1").uploadFile({
url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
multiple:true,
fileName:"myfile",
showStatusAfterSuccess:false,
showAbort:false,
showDone:false,
});

Output:
Upload



Changing Upload Button style

Source: 
$("#stylingupload2").uploadFile({
url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
multiple:true,
fileName:"myfile",
showStatusAfterSuccess:false,
showAbort:false,
showDone:false,
uploadButtonClass:"ajax-file-upload-green"
});

Output:
Upload

jQuery Upload File API


uploadFile
Creates Ajax form and uploads the files to server. 

var uploadObj = $("#uploadDivId").uploadFile(options);.


startUpload
uploads all the selected files. This function is used when autoSubmit option is set to false. 

uploadObj.startUpload();


Options

url
Server URL which handles File uploads


method
Upload Form method type POST or GET. Default is POST


enctype
Upload Form enctype. Default is multipart/form-data.


formData
An object that should be send with file upload. data: { key1: 'value1', key2: 'value2' }


returnType
Expected data type of the response. One of: null, 'xml', 'script', or 'json'. The returnType option provides a means for specifying how the server response should be handled. The following values are supported:
xml: if returnType == 'xml' the server response is treated as XML and the 'success' callback method, if specified, will be passed the responseXML value
json: if returnType == 'json' the server response will be evaluted and passed to the 'success' callback, if specified
script: if returnType == 'script' the server response is evaluated in the global context


allowedTypes
List of comma separated file extensions. Default is "*". Example: "jpg,png,gif"


fileName
Name of the file input field.Default is file


multiple
If it is set to true, multiple file selection is allowed. Default isfalse


maxFileSize
Allowed Maximum file Size in bytes.


maxFileCount
Allowed Maximum number of files to be uploaded .


autoSubmit
If it is set to true, files are uploaded automatically. Otherwise you need to call .startUpload function. Default istrue


showCancel
If it is set to false, Cancel button is hidden when autoSubmit is false. Default istrue


showAbort
If it is set to false, Abort button is hidden when the upload is in progress. Default istrue


showDone
If it is set to false, Done button is hidden when the upload is completed. Default istrue


showDelete
If it is set to true, Delete button is shown when the upload is completed. Default isfalse,You need to implement deleteCallback() function.

showProgress
If it is set to true, Progress precent is shown to user. Default isfalse


showFileCounter
If it is set to true, File counter is shown with name. Default istrueFile Counter style can be changed using fileCounterStyle. Default is ).


showStatusAfterSuccess
If it is set to false, status box will be hidden after the upload is done. Default istrue


onSelect
callback back to be invoked when the files are selected or dropped. 

onSelect:function(files)
{
    files[0].name;
    return true; //to allow file submission.
}


onSubmit
callback back to be invoked before the file upload. 

onSubmit:function(files)
{
	//files : List of files to be uploaded
	//return false; to stop upload
}


onSuccess
callback to be invoked when the upload is successful. 

onSuccess:function(files,data,xhr)
{
	//files: list of files
	//data: response from server
	//xhr : jquer xhr object
}

afterUploadAll
callback to be invoked when all the uploads are done. 

afterUploadAll:function()
{

}


onError
callback back to be invoked when the upload is failed. 

onError: function(files,status,errMsg)
{
	//files: list of files
	//status: error status
	//errMsg: error message
}


deleteCallback
callback to be invoked when the user clicks on Delete button.. 

deleteCallback: function(data,pd)
{
	for(var i=0;i<data.length;i++)
	{
	 	$.post("delete.php",{op:"delete",name:data[i]},
	    function(resp, textStatus, jqXHR)
	    {
			//Show Message	
			alert("File Deleted");	    
	    });
	 }		
	pd.statusbar.hide(); //You choice to hide/not.

}


uploadButtonClass
Upload Button class. Default isajax-file-upload


PHP code for handling Multiple file uploads

upload.php Source: 
<?php
$output_dir = "uploads/";
if(isset($_FILES["myfile"]))
{
	$ret = array();

	$error =$_FILES["myfile"]["error"];
	//You need to handle  both cases
	//If Any browser does not support serializing of multiple files using FormData() 
	if(!is_array($_FILES["myfile"]["name"])) //single file
	{
 	 	$fileName = $_FILES["myfile"]["name"];
 		move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
    	$ret[]= $fileName;
	}
	else  //Multiple files, file[]
	{
	  $fileCount = count($_FILES["myfile"]["name"]);
	  for($i=0; $i < $fileCount; $i++)
	  {
	  	$fileName = $_FILES["myfile"]["name"][$i];
		move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
	  	$ret[]= $fileName;
	  }
	
	}
    echo json_encode($ret);
 }
 ?>


delete.php Source code: 
<?php
$output_dir = "uploads/";
if(isset($_POST["op"]) && $_POST["op"] == "delete" && isset($_POST['name']))
{
	$fileName =$_POST['name'];
	$filePath = $output_dir. $fileName;
	if (file_exists($filePath)) 
	{
        unlink($filePath);
    }
	echo "Deleted File ".$fileName."<br>";
}
?>

Server settings for Large file uploads

php.ini settings 
max_file_uploads = 2000
upload_max_filesize = 40000M
max_input_vars = 10000
post_max_size = 40000M

httpd.conf settings 
php_value suhosin.post.max_vars 10000
php_value suhosin.request.max_vars 10000
php_value suhosin.get.max_array_depth 2000
php_value suhosin.get.max_vars 10000
php_value suhosin.upload.max_uploads 2000

Please Share it with your friends if you like the plugin:



Loading Comments...