jQuery File Upload Options
Posted By : Sagar Watts | 04-Dec-2017
jQuery File Upload comes with lots of configurable options . We will discuss most of the options available in the jquery.fileupload.js . The plugin provide us another JS file jquery.fileupload-ui.js for user interface, which includes all the option from the basic and add some advance options. This plugin use jquery ajax call to make the upload request. So whatever the options we will set, they will be passed to ajax call. Also this allow us to define any callback for ajax calls.
The most important thing here to notice is that we should not change cache (by default false), content type and process data options of the ajax to make file upload work fine .Apart from that there are number of ajax options which we can change.
Url: You can pass the server address, where you want your file to upload and handle the file upload at server end. If it not defined, the plugin will search for form action property for search. Even if that is not defined it will be url of current page. We can set this option as we set in ajax call . here is the code for that :
$('#fileupload').fileupload({
url: url
});
Also, we can change the type and dataType for the ajax calls.
Drop zone : One of the most useful feature of the plugin is drag and drop feature. So we can set the dropZone option to make it working for us. By default the drop zone is complete page, however we can set it to null or left it blank to disable this option. The code will look like this :
$('#fileupload').fileupload({
dropZone: $('#dropzone')
});
3. SingleFileUploads : Since we can select to upload multiple files , we have the option to set the upload behaviour for files. i.e we can choose to upload all the selected files in one call or different call for each file. By default, each file is uploaded through different upload request, however we can set an option singleFileUploads to false to upload them in single file.
4. limitMultiFileUploads : Since we are uploading multiple files, we have an option to put check on the number of files we want to upload in one go. With this option we can set the number of files (in case of multiple files) we can upload. By default we can upload any number of files. Here is the code to set this options :
$('#fileupload').fileupload({
limitMultiFileUploads :2 // any number greater than zero
});
$('#fileupload').fileupload({
formData: [{
name: 'a',
value: 1 }]
});
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sagar Watts
Sagar is a bright Web App Lead Developer , he has great knowledge of core Java and advance Java. His hobbies are Net Surfing, Listen Music and Reading Books.