JQuery file Upload files upload plugin uses

Source: Internet
Author: User
Tags event listener jquery file upload ruby on rails

jquery file Upload is a jquery document upload component that supports multiple file uploads, cancellations, deletions, pre-upload thumbnail previews, list display image sizes, support for upload progress bar display, and server-side support for various dynamic language development. Website Link: Https://github.com/blueimp/jQuery-File-Upload/wiki

Features: Drag and drop support, upload progress bar, Image Preview, customizable and extensible, compatible with any server-side application platform (PHP, Python, Ruby on Rails, Java, node. js, Go etc).

How to use:

1. js file that needs to be loaded:





2. HTML code:

<input id= "FileUpload" type= "file" Name= "files[]" data-url= "server/php/" multiple>

3. JS Code:

$ (function () {

$ (' #fileupload '). FileUpload ({

DataType: ' JSON ',

Done:function (E, data) {

$.each (data.result.files, function (index, file) {

$ (' <p/> '). Text (file.name). AppendTo (Document.body);





3.1 Display the upload progress bar:

$ (' #fileupload '). FileUpload ({

Progressall:function (E, data) {

var progress = parseint (Data.loaded/data.total * 100, 10);

$ (' #progress. Bar '). CSS (

' Width ',

Progress + '% '




3.2 Need a <div> container to display in:

<div id= "Progress" >

<div class= "Bar" style= "width:0%;" ></div>


4. API

4.1 Initialization:

Call the FileUpload () method on the Upload button;

Example: $ (' #fileupload '). FileUpload ();

4.2 Options:

1:url: Destination URL for request delivery


Example: '/path/to/upload/handler.json '

2.Type: File upload http request mode, you can choose "POST", "PUT" or "PATCH",

Default "POST"


Example: ' PUT '

3. DataType: The data type that you want to return from the server, the default "JSON"


Example: ' JSON '

4. Autoupload: By default, files that are added to the component when the user taps the Start button are uploaded immediately. Set the Autoupload value to True to automatically upload.



5. Acceptfiletypes: Types of files that are allowed to be uploaded

Example:/(\.| \/) (GIF|JPE?G|PNG|XLSX) $/i

6. MaxFileSize: Maximum upload file size

example:999000 (999KB)//unit: B

7. Minfilesize: Minimum upload file size

example:100000 (100KB)//unit: B

8.previewMaxWidth: Maximum width of picture preview area

EXAMPLE:100//unit: PX

4.3 Callback Options:

Use method one: function properties

Instance: $ (' #fileupload '). FileUpload ({

Drop:function (E, data) {

$.each (data.files, function (index, file) {

Alert (' Dropped file: ' + file.name);



Change:function (E, data) {

$.each (data.files, function (index, file) {

Alert (' Selected file: ' + file.name);




Using method Two: Binding event listener function


$ (' #fileupload ')

. bind (' Fileuploaddrop ', function (e, data) {/* ... */})

. bind (' Fileuploadchange ', function (e, data) {/* ... */});

Each event name is prefixed with: "FileUpload";

It is recommended that you use the second method.

Common callback functions:

1. Add: Triggered when the file is added to the upload component

$ (' #fileupload '). Bind (' Fileuploadadd ', function (e, data) {/* */});

or $ (' #fileupload '). On (' Fileuploadadd ', function (e, data) {/* ... */});

2. Processalways: Triggers when a separate file processing queue finishes (complete or failed)

3. Progressall: Global upload callback function for handling events


$ (' #fileupload '). On (' Fileuploadprogressall ', function (e, data) { // progress bar Display

var progress = parseint (data. Loaded /data.total * 100, 10);

$ (' #progress. Progress-bar '). CSS (

' width ',

Progress + '% '



4. Fail: The callback function triggered when the upload request fails, and the function will not be triggered if the server returns a JSON response with the error property.

5. Done: The callback function triggered when the upload request succeeds, and the function will be triggered if the server returns a JSON response with the error property.

6. Always: At the end of the upload request (success, error or abort) will be triggered.

JQuery file Upload files upload plugin uses

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.