jQuery File Upload basic
Posted By : Sagar Watts | 29-Nov-2017
jQuery File Upload is one of the most powerfull plugin to upload the files from HTML page to our respective servers. It provide us the flexibility to develop our own interface along with in-built interface. These are the feature which are provided by jQuery File Upload :
-
Supports multiple file selection.
-
Provides Drag n Drop feature.
-
Show file upload progress.
-
Works with many server-side platforms.
-
Support cross-domain file upload.
-
Provide various callback events to perform different functions.
Now, that we know the features that Jquery file upload provides. We will see basic example to implement it .
As for every plugin we must include the required JS and CSS in our page, the same is with Jquery file Upload. It provides us lots of JS to includes in our page to extend the functionality of plugin .But the most important JS files that every one must include in HTML page is jquery.fileupload.js and jquery.iframe-transport.js. The code will look like this :
For the file upload we can simply use the file type input like this.
We can add multiple as per our requirement if we want to add the multiple files or not. Also the data-url attribute can be provided as an options for file upload. That’s all we need to do in the HTML .
Now that we are done with the code that is required for HTML, we will call a basic function to upload file . We can simply invoke the file upload using fileupload method on div like this : -
$('#uploadFile’).fileupload({});
This is the most basic way to invoke the file upload. However we can set the multiple options and use the various callback events as per the requirements .We can pass the required options like this :
Thanks.
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.