For the HTML5 version will be better to support the mobile browser, to avoid the Apple Mobile Safari browser does not support
Flash, Main features: support multiple file upload, HTML5 version can drag and drop upload, real-time upload progress bar display, powerful parameters
Custom features such as file size, file type, button picture definition, upload file script, etc.
How to use Flash version:
1. Load JS and CSS
Copy Code code 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. Writing HTML content
Copy Code code as follows:
<form>
<div id= "queue" ></div>
<input id= "File_upload" name= "file_upload" type= "file" multiple= "true" >
</form>
3. Function call
Copy Code code as follows:
<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 parameter configuration detailed
The relative path to the uploader:uploadify.swf file, which is a button with a text browse, and fades out after clicking
Open File dialog box, default value: uploadify.swf.
Script: The relative path of the background handler. Default value: uploadify.php
Checkscript: Used to determine the relative path of a background handler that uploads selected files to the presence of the server
Filedataname: Sets a name, in the server handler according to the name to fetch the data of the uploaded file. Default is Filedata
Method: Submit to post or get defaults to post
Scriptaccess:flash script file access mode, if the local test is set to always, default value: Samedomain
Folder: The directory where the uploaded files are stored.
Queueid: ID of the file queue, which is the same as the ID of the div that holds the file queue.
Queuesizelimit: When multiple file generation is allowed, set the number of selected files, the default value: 999.
Multi: Multiple files can be uploaded when set to True.
Auto: Set to True when the file is selected directly uploaded, for false need to click the Upload button to upload.
Filedesc: This property value must be set to the Fileext property before it is valid to set the prompt text in the Select File dialog box, as set
Set Filedesc as "Please select RAR doc PDF File"
Fileext: Sets the type of file that can be selected, in the format of: ' *.doc;*.pdf;*.rar '.
SizeLimit: Size limit for uploading files.
Simuploadlimit: Allow simultaneous upload of the number of defaults: 1.
ButtonText: The text of the browse button, default: Browse.
BUTTONIMG: The path to the picture of the browse button.
Hidebutton: Set to True hides the picture of the browse button.
Rollover: A value of true and false, when set to true, has a reversal effect when the mouse is moved over the browse button.
Width: Sets the navigation button widths, the default value: 110.
Height: Sets the browse button heights, default value: 30.
Wmode: Setting this entry to transparent can make the flash background file transparent for the browse button, and the Flash file will be placed as a page
The top layer of the face. Default value: Opaque.
CANCELIMG: Select the Close button icon on each file after file to the file queue
The value of key values described above is either a string or a Boolean type, which is simpler, and the value of the key to be introduced next is a function that can return some information to the user when selecting a file, error, or other action.
OnInit: Do some initialization work
Onselect: Triggers when selecting a file, which has three parameters
Event: Events object.
Queueid: A unique identification of the file, consisting of 6 random characters.
Fileobj: Selected file object with name, size, CreationDate, Modificationdate, type 5 properties.
The code is as follows:
Copy Code code 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 ("Unique ID:" + queueid + "\ r \ n" +
"FileName:" + fileobj.name + "\ r \ n" +
"File Size:" + fileobj.size + "\ r \ n" +
"Create Time:" + fileobj.creationdate + "\ r \ n" +
"Last Modified Time:" + fileobj.modificationdate + "\ r \ n" +
"File type:" + Fileobj.type
);
}
});
});
</script>
Onselectonce: When a single file or multiple file upload, select the file when the trigger. The function has two parameters Event,data,data object
There are several properties:
FileCount: Select the total number of files.
filesselected: Select the number of files at the same time, if 3 files selected at a time the property value is 3.
Filesreplaced: If A and b two files already exist in the file queue, A and B are selected when the file is selected again, and the property value is 2.
Allbytestotal: The total size of all selected files.
OnCancel: Trigger when clicking on the Close button of file in file queue or clicking Cancel upload. This function has event, Queueid, Fileobj,
Data four parameters, the first three parameters with three parameters in Onselect, the data object has two properties FileCount and Allbytestotal.
FileCount: After canceling a file, the number of files remaining in the file queue.
Allbytestotal: The size of the remaining files in the file queue after a file is canceled.
Onclearqueue: Triggered when a function fileuploadclearqueue is called. There are event and data two parameters, with two corresponding parameters in the OnCancel.
Onqueuefull: Triggered when Queuesizelimit is set and the number of files selected exceeds the Queuesizelimit value. The function has two
Parameter event and Queuesizelimit.
OnError: Triggered when an error occurs during the upload process. The function has four parameters, event, Queueid, Fileobj, Errorobj, where the first three arguments
Number Ibid., the Errorobj object has type and info two properties.
Type: Wrong types, three kinds of ' HTTP ', ' IO ', or ' security '
Info: Description of the error
OnOpen: Click on upload Trigger, if the auto set to True is to select the file trigger, if more than one file upload will traverse the entire file queue.
The function has three parameters of event, Queueid and Fileobj, and the parameters are explained as above.
OnProgress: Click on upload Trigger, if the auto set to True is to select the file trigger, if more than one file upload will traverse the entire file team
Columns, which are triggered after onopen. The function has event, Queueid, Fileobj, data four parameters, the first three parameters are explained above.
The data object has four properties percentage, bytesloaded, allbytesloaded, Speed:
Percentage: Percentage of current completion
Bytesloaded: The size of the current upload
Allbytesloaded: The size that has been uploaded in the file queue
Speed: Upload Rate kb/s
OnComplete: Triggered after file upload completes. The function has four arguments event, Queueid, Fileobj, response, data five parameters, the first three parameters
Ditto. Response the value returned for the spooler, in the example above 1 or 0,data has two attributes FileCount and speed
FileCount: The number of files remaining without upload completed.
Speed: Average rate of file uploads kb/s
Note: The Fileobj object is somewhat different from what is mentioned above, and OnComplete Fileobj object has a FilePath property that can take the path of the uploaded file.
Onallcomplete: Triggered after all files in the file queue have been uploaded. The function has event and data two parameters, and data has four properties,
respectively:
Filesuploaded: The number of files uploaded.
Errors: Number of errors occurred.
allbytesloaded: Total size of all uploaded files.
Speed: Average upload rate kb/s
