JQuery File Upload upload plugin use detailed _jquery

jquery file Upload is a jquery files upload component that supports multiple file uploads, cancellations, deletions, thumbnail previews before uploading, list display picture size, support for uploading progress bar display, and support for all kinds of dynamic language development server side.

Website Link: Https://github.com/blueimp/jQuery-File-Upload/wiki

Features: Drag-and-drop support; upload progress bar; image preview; customizable and scalable; compatible with any server-side application platform (PHP, Python, Ruby on Rails, Java, node.js, go etc.).

How to use:

1. Need to load the JS file:

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 Show upload progress bar:　

$ (' #fileupload '). FileUpload ({
progressall:function (e, data) {
var progress = parseint (DATA.LOADED/DATA.T　　otal);
$ (' #progress. Bar '). CSS ('
width ',
progress + '% '
);
}
);

　　3.2 Requires a <div> container for 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: Requested destination URL for sending

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: Data type that you want to return from the server, default "JSON"

Type:string

Example: ' JSON '

4. Autoupload: By default, files that are added to the component as soon as the user clicks the Start button will be uploaded immediately. Set the Autoupload value to True to automatically upload.

Type:boolean

Default:true

5. Acceptfiletypes: File types 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:

Using method one: Function properties

Instance:

$ (' #fileupload '). FileUpload ({
drop:function (e, data) {
$.each (data.files, function (index, file) {
ale　　RT (' Dropped file: ' + file.name);
});
},
change:function (e, data) {
$.each (data.files, function (index, file) {
alert (' Selected file: ' + F　　Ile.name);
});
}
);

Using method Two: Binding event listener functions

Instance:

$ (' #fileupload ')
. bind (' Fileuploaddrop ', function (e, data) {/* ... *)
. bind (' Fileuploadchange ', funct Ion (E, data) {/* ... */});

Each event name is prefixed with: "FileUpload";

Note that the second method is recommended.

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 ends (completes or fails)

3. Progressall: callback function for global upload processing events

Example:

$ (' #fileupload '). On (' Fileuploadprogressall ', function (e, data) {//progress bar displays
var progress = parseint (data.loaded/data . Total *;
$ (' #progress. Progress-bar '). CSS ('
width ',
progress + '% '
);
});

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

5. Done: The callback function that triggers when the upload request succeeds, and the function is triggered if the server returns a JSON response with the error attribute.

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

The above is a small set to introduce the jquery file upload files upload plug-ins Use detailed, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!