JS Tutorial
- Overview
- Documents
jQuery Upload File plugin provides Multiple file Uploads with progress bar. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
Supported Browsers
IE 8.0,IE 9.0,IE 10.0,Firefox,Safari,Opera,Chrome
Drag drop is supported in IE10,Firefox,Safari,Opera,Chrome
Source: hayageek.com
1. INCLUDE JS AND CSS FILES
<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. HTML
<div id="fileuploader">Upload</div>
3. JAVASCRIPT
$(document).ready(function()
{
$("#fileuploader").uploadFile({
url:"YOUR_FILE_UPLOAD_URL",
fileName:"myfile"
});
});
4. SERVER SIDE
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>";
}
?>
5. 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
6. APIS
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();
7. EVENTS
$("#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));
}
});
8. EXAMPLES
Jquery File Upload with File Restrictions
$("#singleupload2").uploadFile({
url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
allowedTypes:"png,gif,jpg,jpeg",
fileName:"myfile"
});
Jquery Multiple File Upload
$("#multipleupload").uploadFile({
url:"http://hayageek.com/examples/jquery/ajax-multiple-file-upload/upload.php",
multiple:true,
fileName:"myfile"
});
