JQuery File Upload plug-in Uploadify User Guide

The HTML5 version will better support mobile browsers to prevent Apple mobile Safari from being supported
Flash, main features: support for multi-File Upload, drag-and-drop upload for HTML5 version, real-time upload progress bar display, powerful Parameters
Custom functions, such as file size, file type, button image definition, and file upload script.

Flash version usage:
1. Load JS and CSS

Copy codeThe Code is as follows:
<Script src = "jquery/1.7.1/jquery. min. js" type = "text/javascript"> </script>
<Script src = "jquery. uploadify. min. js" type = "text/javascript"> </script>
<Link rel = "stylesheet" type = "text/css" href = "uploadify.css">

2. Compile HTML content

Copy codeThe Code is as follows:
<Form>
<Div id = "queue"> </div>
<Input id = "file_upload" name = "file_upload" type = "file" multiple = "true">
</Form>


3. function call

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function ()
{
$ ("# File_upload"). uploadify ({
'Upload': 'uploadify.swf ',
'Script': 'uploadhandler. php ',
'Folder': 'uploadfile ',
'Queue id': 'filequeue ',
'Auto': true,
'Multi ': true
});
});
</Script>

4. More parameter configuration details

Uploader: The relative path of the uploadify.swf file. The swf file is a button with a text BROWSE. Click it to fade out.
Open the file dialog box. Default Value: uploadify.swf.
Script: The relative path of the background processing program. Default Value: uploadify. php
CheckScript: used to determine whether the selected file to be uploaded is in the relative path of the background processing program on the server
FileDataName: Set a name based on the name in the server handler to obtain the data of the uploaded file. The default value is Filedata.
Method: The default submission method is Post or Get.
ScriptAccess: the access mode of the flash script file. If you set it to always in a local test, the default value is sameDomain.
Folder: directory where the uploaded files are stored.
QueueID: ID of the file queue, which is consistent with the ID of the div storing the file queue.
QueueSizeLimit: when multiple files are allowed to be generated, set the number of selected files. Default Value: 999.
Multi: When set to true, multiple files can be uploaded.
Auto: Set to true. When a file is selected, it is uploaded directly. If it is set to false, You need to click the upload button to upload the file.
FileDesc: This attribute value is valid only after the fileExt attribute is set. It is used to set the prompt text in the select file dialog box, as shown in
Set fileDesc to "select rar doc PDF file"
FileExt: Set the file type that can be selected. The format is '*. doc; *. pdf; *. rar '.
SizeLimit: Specifies the size limit of the file to be uploaded.
SimUploadLimit: the number of simultaneous uploads allowed. Default Value: 1.
ButtonText: the text of the browser button. Default Value: BROWSE.
ButtonImg: Path of the image of the browser button.
HideButton: if it is set to true, the image of the Browse button is hidden.
Rolover: The values are true and false. If it is set to true, the result is reversed when you move the cursor over the Browse button.
Width: Set the width of the browser button. Default Value: 110.
Height: Set the height of the Browse button. Default Value: 30.
Wmode: If this parameter is set to transparent, the flash background file of the browser button is transparent and the flash file is set to a page.
. Default Value: opaque.
CancelImg: select the close button icon for each file after the file is in the file queue.

The value of the key value described above is a string or boolean type, which is relatively simple. The value of the key value to be introduced is a function, you can return some information to the user when selecting files, errors, or other operations.

OnInit: Perform initialization.
OnSelect: triggered when a file is selected. This function has three parameters.
Event: event object.
QueueID: the unique identifier of a file. It consists of 6 random characters.
FileObj: Selected file object, which has five attributes: name, size, creationDate, modificationDate, and type.
The Code is as follows:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function ()
{
$ ("# Uploadify"). uploadify ({
'Upload': 'JS/jquery. uploadify-v2.1.0/uploadify.swf ',
'Script': 'uploadhandler. ashx ',
'Cancelim': 'js/jquery. uploadify-v2.1.0/cancel.png ',
'Folder': 'uploadfile ',
'Queue id': 'filequeue ',
'Auto': false,
'Multi ': true,
'Oninit ': function () {alert ("1 ");},
'Onselect': function (e, queueId, fileObj)
{
Alert ("unique identifier:" + queueId + "\ r \ n" +
"File name:" + fileObj. name + "\ r \ n" +
"File size:" + fileObj. size + "\ r \ n" +
"Creation time:" + fileObj. creationDate + "\ r \ n" +
"Last modification time:" + fileObj. modificationDate + "\ r \ n" +
"File type:" + fileObj. type
);

}
});
});
</Script>

　　
OnSelectOnce: triggered when a single file or multiple files are uploaded. This function has two parameters: event, data, and data.
It has the following attributes:
FileCount: Total number of selected files.
FilesSelected: select the number of files at the same time. If three files are selected at a time, the attribute value is 3.
FilesReplaced: If two files A and B exist in the file queue, select A and B again when selecting the file again. The attribute value is 2.
AllBytesTotal: total size of all selected files.
OnCancel: triggered when you click the close button of a file in the file queue or click Cancel upload. This function includes event, queueId, fileObj,
The first three parameters are the same as the three parameters in onSelect. The data object has two attributes: fileCount and allBytesTotal.
FileCount: number of remaining files in the file queue after a file is canceled.
AllBytesTotal: the size of the remaining files in the file queue after a file is canceled.

OnClearQueue: triggered when the fileUploadClearQueue function is called. There are two parameters, event and data, which correspond to two parameters in onCancel.
OnQueueFull: triggered when queueSizeLimit is set and the number of selected files exceeds the value of queueSizeLimit. This function has two
Parameter event and queueSizeLimit.
OnError: triggered when an error occurs during the upload process. This function has four parameters: event, queueId, fileObj, and errobj. The first three parameters
The number is the same as the preceding one. The errobj object has two attributes: type and info.
Type: indicates the type of the Error. There are three types: 'http', 'io', or 'security'
Info: Error description
OnOpen: triggered when you Click Upload. If auto is set to true, It is triggered when you select a file. If multiple files are uploaded, the entire file queue is traversed.
This function has three parameters: event, queueId, and fileObj. The parameters are interpreted as the same as above.
OnProgress: triggered when you Click Upload. If auto is set to true, It is triggered when you select a file. If multiple files are uploaded, the entire file team is traversed.
Column, triggered after onOpen. This function has four parameters: event, queueId, fileObj, and data. The first three parameters are interpreted as the same as above.
Data Objects have four attributes: percentage, bytesLoaded, allBytesLoaded, and speed:
Percentage: percentage of current completions
BytesLoaded: Current upload size
AllBytesLoaded: size of the uploaded file queue
Speed: the upload speed is kb/s.
OnComplete: triggered after the file is uploaded. This function has four parameters: event, queueId, fileObj, response, and data. The first three parameters
Same as above. Response is the value returned by the background processing program. In the preceding example, response is 1 or 0. data has two attributes: fileCount and speed.
FileCount: the number of files that have not been uploaded.
Speed: Average File Upload rate kb/s
Note: The fileObj object is not the same as the above mentioned. The fileObj object of onComplete has a filePath attribute to retrieve the path of the uploaded file.
OnAllComplete: triggered when all files in the file queue are uploaded. This function has two parameters: event and data. data has four attributes,
They are:
FilesUploaded: Number of all uploaded files.
Errors: number of errors.
AllBytesLoaded: total size of all uploaded files.
Speed: Average upload speed kb/s