How to use jQuery file upload plugin Uploadify

 
<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. Write HTML content

<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>

3. Function call

<script type="text/javascript">
        $(document).ready(function()
        {
            $("#file_upload").uploadify({
                'uploader': 'uploadify.swf',
                'script': 'UploadHandler.php',                
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': true,
                'multi': true
            });
        });  
</script>

4. More details of parameter configuration

Uploader: uploadify.swf file, which is a button with the text BROWSE, faded out
Uploadify.swf opens the file dialog and the default value is uploadify.swf.
Script:     The relative path of the background handler. Default: uploadify.php
CheckScript: the relative path of the background handler used to determine whether the file selected for uploading exists on the server
FileDataName: sets a name by which data from the uploaded file is retrieved in the server handler. The default is Filedata
Method: the submission method Post or Get defaults to Post
ScriptAccess: flash script file access mode, if set to always in local test, default: sameDomain ;
Folder:   Upload files to the directory where they are stored.
QueueID: the ID of the file queue, which is the same as the ID of the div that holds the file queue.
QueueSizeLimit: when multiple files are allowed, set the number of selected files, default value: 999.
Multi: multiple files can be uploaded when set to true.
Auto: set to true when the file is selected, it is uploaded directly. To set to false, you need to click the upload button to upload.
FileDesc: this property value is valid only after the fileExt property is set, and is used to set the prompt text in the select file dialog box, such as set
Set fileDesc as "please select rar doc PDF file"
FileExt: sets the type of file you can choose, in the format of '*.doc; *. PDF; *. Rar '.
SizeLimit: the sizeLimit for uploading files.
SimUploadLimit: the default value for the number of simultaneous uploads is 1.
ButtonText: BROWSE the text of the button. The default value is BROWSE.
ButtonImg: browse the path to the picture of the button.
HideButton: set to true to hide the image of the browse button.
Rollover: values true and false, set to true to reverse when the mouse over the browse button.
Width: sets the width of the browse button to 110 by default.
Height: sets the height of the browse button, with a default value of 30.
Wmode: set this item to transparent to make the flash background file of the browse button transparent, and the flash file will be set to page
The top of the plane. Default value: opaque.
CancelImg: select the close button icon on each file after the file is queued

The value of the key value introduced above is a string or Boolean type, which is relatively simple. The value of the key value to be introduced next is a function, which can return some information to the user when selecting a file, making an error, or some other operation.

OnInit: do some initialization
OnSelect: triggered when a file is selected. This function takes three arguments
Event: event object.
QueueID: the unique identity of the file, consisting of 6 random characters.
FileObj: the selected file object has five attributes: name, size, creationDate, modificationDate and type.
The code is as follows:

 
<script type="text/javascript">
$(document).ready(function()
{
    $("#uploadify").uploadify({
        'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
        'script': 'UploadHandler.ashx',
        'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
        'folder': 'UploadFile',
        'queueID': 'fileQueue',
        'auto': false,
        'multi': true,
        'onInit':function(){alert("1");},
        'onSelect': function(e, queueId, fileObj)
        {
            alert(" A unique identifier :" + queueId + "rn" +
                  " The file name: " + fileObj.name + "rn" +
                  " File size: " + fileObj.size + "rn" +
                  " Creation time: " + fileObj.creationDate + "rn" +
                  " Last modified: " + fileObj.modificationDate + "rn" +
                  " File type: " + fileObj.type
            );

        }
    });
});
</script>

OnSelectOnce: triggered when a file is selected when a single file or multiple files are uploaded. This function has two parameters: event, data, and data object
Has the following properties:
FileCount: select the total number of files.
FilesSelected: selects the number of files at the same time. If three files are selected at once, the value of this property is 3.
Filesactor: if A and B files are already in the file queue and A and B are selected again, this property has A value of 2.
The total size of the allBytesTotal: all of the selected file.
OnCancel: triggered when you click the close button on the file queue or click cancel upload. This function has event, queueId, fileObj,
Data of four parameters, three parameters of the first three parameters with the onSelect, data object has two attributes fileCount and allBytesTotal.
FileCount: the number of files left in the file queue after a file is canceled.
AllBytesTotal: cancel a file, the size of the remaining files in the queue.

OnClearQueue: triggered when the function fileUploadClearQueue is called. There are two parameters, event and data, corresponding to the two parameters in onCancel.
OnQueueFull: triggered when queueSizeLimit is set and the number of files selected exceeds the value of queueSizeLimit. This function has two
The parameters event and queueSizeLimit.
OnError: triggered when an error occurs during the upload process. This function has four parameters: event, queueId, fileObj, and errorObj, among which the first three parameters are
The errorObj object has two properties, type and info.
Type: error type, there are three 'HTTP',' IO', or 'Security'
Info: wrong description
OnOpen: triggered when clicking upload, triggered when selecting a file if auto is set to true, and traversed the entire file queue if multiple files are uploaded.
This function has three parameters: event, queueId, and fileObj.
OnProgress: triggered when clicking upload, triggered when selecting a file if auto is set to true, and traversed the entire file queue if multiple files are uploaded
  Column, triggered after onOpen. This function has four parameters: event, queueId, fileObj and data. The first three parameters are explained in the same way as above.
The data object has four attributes: percentage, bytesLoaded, allBytesLoaded, speed:
Percentage: the percentage currently completed
BytesLoaded: the current uploaded size
AllBytesLoaded: the size of a file queue that has been loaded
Speed: upload rate KB /s
OnComplete: triggered when the file is uploaded. This function has four parameters: event, queueId, fileObj, response, data, and the first three parameters
Same as above. Response is the value returned by the background handler, either 1 or 0 in the above example, and data has two properties, fileCount and speed
FileCount: the number of files left unuploaded.
Speed: average file upload rate of KB /s
Note: the fileObj object is a bit different from the above. OnComplete's fileObj object has a filePath property to fetch the path to 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.
Are:
The number of all the files in the filesUploaded: upload.
Errors: the number of errors that occur.
AllBytesLoaded: the total size of all uploaded files.
Speed: average upload rate of KB /s