JQuery file Upload files upload plugin uses

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:

Jquey-1.8.3.min.js

Jquery-ui-widget.js

Jquery.iframe-transport.js

Jquery.fileupload.js

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>

</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

Type:string

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

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

Default "POST"

Type:string

Example: ' PUT '

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

Type:string

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.

Type:boolean

Default:true

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

Instance:

$ (' #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

Example:

$ (' #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