jQuery Plugin For Multiple File Uploader - Upload File

Upload File is an easy jQuery plugin used to create a file uploader with progress bar that supports multiple files and drag & drop uploads.

You might also like:

• Beautiful jQuery File Upload Plugin with Bootstrap
• Drag and Drop File Uploader Plugin - dropzone
• Fine Uploader - User Friendly File Uploading Plugin

Basic usage:

1. Include jQuery javascript library and jQuery upload file plugin on the html page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.uploadfile.min.js"></script>

2. Include required jQuery upload file stylesheet to style the uploader

<link href="css/uploadfile.css" rel="stylesheet">

3. Create a div container for your file uploader

<div id="fileuploader">Upload</div>

4. Call the plugin with options

<script>
$(document).ready(function()
{
$("#fileuploader").uploadFile({
url:"Path TO Upload.php",
fileName:"myfile"
});
});
</script>

5. All the options and API callbacks

<script>
$(document).ready(function()
{
$("#fileuploader").uploadFile({
url: "", // Server URL which handles File uploads
method: "POST", // Upload Form method type POST or GET.
enctype: "multipart/form-data", // Upload Form enctype.
formData: null, // An object that should be send with file upload. data: { key1: 'value1', key2: 'value2' }
returnType: null,
allowedTypes: "*", // List of comma separated file extensions: Default is "*". Example: "jpg,png,gif"
fileName: "file", // Name of the file input field. Default is file
formData: {},
dynamicFormData: function () { // To provide form data dynamically
    return {};
},
maxFileSize: -1, // Allowed Maximum file Size in bytes.
maxFileCount: -1, // Allowed Maximum number of files to be uploaded
multiple: true, // If it is set to true, multiple file selection is allowed. 
dragDrop: true, // Drag drop is enabled if it is set to true
autoSubmit: true, // If it is set to true, files are uploaded automatically. Otherwise you need to call .startUpload function. Default istrue
showCancel: true,
showAbort: true,
showDone: true,
showDelete: false,
showError: true,
showStatusAfterSuccess: true,
showStatusAfterError: true,
showFileCounter: true,
fileCounterStyle: "). ",
showProgress: false,
nestedForms: true,
showDownload:false,
onLoad:function(obj){},
onSelect: function (files) {
    return true;
},
onSubmit: function (files, xhr) {},
onSuccess: function (files, response, xhr,pd) {},
onError: function (files, status, message,pd) {},
onCancel: function(files,pd) {},
downloadCallback:false,
deleteCallback: false,
afterUploadAll: false,
uploadButtonClass: "ajax-file-upload",
dragDropStr: "<span><b>Drag &amp; Drop Files</b></span>",
abortStr: "Abort",
cancelStr: "Cancel",
deletelStr: "Delete",
doneStr: "Done",
multiDragErrorStr: "Multiple File Drag &amp; Drop is not allowed.",
extErrorStr: "is not allowed. Allowed extensions: ",
sizeErrorStr: "is not allowed. Allowed Max size: ",
uploadErrorStr: "Upload is not allowed",
maxFileCountErrorStr: " is not allowed. Maximum allowed files are:",
downloadStr:"Download",
showQueueDiv:false,
statusBarWidth:500,
dragdropWidth:500
});
});
</script>

Change log:

2017-05-09

• Make options for each ajax req immutable

2017-04-13

• Header Management Fixed

4.0.5 (2015-09-10)

• Fixed afterUploadAll bug
• CSS issue fixed

4.0.0 (2015-07-27)

• Bug fixes

3.1.10 (2014-07-22)

• update

3.1.9 (2014-06-18)

• show image preview onLoad callback

3.1.6 (2014-02-27)

• update() for changing options dynamically, acceptFiles, custom errors are added

3.1.5 (2014-02-18)

• Added onLoad,onCancel,showDownload,downloadCallback,cancelAll(),statusBarWidth,dragdropWidth.

3.1.4 (2014-01-30)

• showQueueDiv option added, using this you can place status bar wherever you want

3.1.3 (2014-01-29)

• Fix for other http methods PUT,DELETE,..etc

3.1.1 (2014-01-04)

• added maxFileCount option

3.1.0 (2013-12-27)

• showProgress,showFileCounter,onSelect() are added

3.0.4 (2013-11-20)

• Fix for IE8,Safari 5, Delete option
• Compatability issues with twitter bootstrap

3.0.2 (2013-11-15)

• Fix for IE9, Scrolling down when the file is selected

2.0.9 (2013-11-10)

• added argument for afterUploadAll(obj) to read plugin data

2.0.8 (2013-11-07)

• Added afterUploadAll() callback.

2.0.7 (2013-10-31)

• Fix for dynamicFormData error

2.0.5 (2013-10-11)

• Fixed issue in formData handling
• Fix for extra Form Data

 

---

This awesome jQuery plugin is developed by hayageek. For more Advanced Usages, please check the demo page or visit the official website.