Uploadify is a great jquery-based file/image upload plugin with two versions based on Flash and HTML5.
Uploadify/uploadifive Main features are:
1. Multi-File Upload
2. Personalize your settings
3. Upload progress bar display
4. Drag-and-drop upload (HTML5 version)
Official website: http://www.uploadify.com
Before you deploy a uploadify instance, make sure that you meet the minimum requirements:
- 1.jQuery 1.4.x or higher
- 2.Flash Player 9.0.24 or later
- 3. Support for PHP, ASP, Cold Fusion Server environment (official default support PHP)
Download the latest version of Uploadify and unzip it to the Uploadify folder in the root directory of the server, you can see the following files:
- Change Log.txt (uploadify upgrade log, deleted during deployment)
- check-exists.php (used to check if there is an identical file in the Upload destination folder)
- index.php (official example)
- Jquery.uploadify.js (Upload plugin)
- Jquery.uploadify.min.js (compressed version of the upload plugin, used during deployment)
- License.txt (license file, delete during deployment)
- UPLOADIFY.CSS (Upload control style sheet)
- uploadify.php (uploading data processing files)
- uploadify.swf (Flash base file)
- Uploadify-cancel.png (Cancel button picture)
In the official case file, the jquery library is quoted on the official jquery website, and a friend needs to refer to the jquery library locally.
Let's take a look at how to deploy uploadify on your project:
1. We assume that the upload control is deployed in upload at the root of the Web site.
PHP, the Uploadify folder is located in the root directory of the site, the uploaded files are saved in the root directory in the Upload folder, Uploadify folder contains check-exists.php, Jquery.min.js, Jquery.uploadify.min.js, Uploadify.css, uploadify.swf, Uploadify-cancel.png.
2. Referencing the jquery library
- <script type= "Text/javascript" "/uploadify/jquery.min.js" ></script>
3. Referencing the uploadify script
- <script type= "Text/javascript" "/uploadify/jquery.uploadify.min.js" ></script>
4. Referencing the uploadify style sheet
- <link "stylesheet" type= "Text/css" href= "Uploadify.css"/>
5. Declare an ordinary HTML file upload control and specify the ID
- <input "File_upload" name= "file_upload" type= "file" multiple= "true" >
6. Bind the declared normal upload control to the Uploadify plug-in and initialize the
- <script type= "Text/javascript" >
- $function
- $ ' #file_upload '. uploadify
- ' swf ': '/uploadify uploadify.swf ',//Specify the main file of the upload control
- ' Uploader ': '/uploadify uploadify.php '//Specify server-side upload processing file
- Additional Configuration Items
- </script>
Auto
Set auto to True to automatically upload files when they are added to the upload queue.
Buttonclass
Add the class name for the upload button.
Buttoncursor
The mouse's shape when the mouse passes the upload button. The optional values are ' hand ' (hand-shaped) and ' arrow ' (arrows).
Buttonimage
Defines the path of the browse button background image. The code that sets the background image for the button is best written in a CSS file.
ButtonText
Defines the text that is displayed on the default button.
Checkexisting
Defines the path to the script file that checks whether a file with the same name exists in the destination folder.
Debug
When its value is true, the SWFUpload debug mode is turned on.
Fileobjname
Defines the name of the file object used to receive data in the Upload data processing file.
Filesizelimit
Upload file size limit.
Filetypedesc
A description of the file types that can be selected. This string appears in the File Type drop-down menu of the Browse for File dialog box.
Filetypeexts
Defines the file suffixes that are allowed to be uploaded.
Formdatajson Object
Define additional data objects that need to be submitted together when the file is uploaded.
Height
The height of the upload button (in pixels).
ItemTemplate
The ItemTemplate option allows you to set a different HTML template for each option added to the queue.
Method
Upload the file submission method, take value ' post ' or ' get '.
Multi
When the value is set to False, only one file can be selected at a time.
Overrideevents
This item defines a set of event names in the default script that you do not want to perform.
Preventcaching
If set to true, a random value is added to the URL of the SWF file, so it is not cached.
Progressdata
Sets the type of data that is displayed in the upload progress bar, either as a percentage (percentage) or as a velocity (speed).
Queueid
The Queueid option allows you to set a DOM element with a unique ID as a container for displaying the upload queue.
Queuesizelimit
The maximum number of bars that can be accommodated at one time in the upload queue.
removecompleted
Not setting this option or setting it to false will cause items in the upload queue to always appear in the queue until the Close button is clicked or the queue is emptied.
Removetimeout
Sets the time (in seconds) to remove from the upload queue when the upload is complete.
Requeueerrors
When set to True, an error message is returned when the upload queue resets or uploads multiple retries.
Successtimeout
Indicates the successful wait time (in seconds, default 30 seconds) for uploadify.
Swf
Defines the path to the uploadify.swf.
Uploader
Defines the path to the server-side upload data processing script file uploadify.swf.
Uploadlimit
Defines the maximum number of uploads allowed.
Width
Defines the width of the browse button.
OnCancel
Set the OnCancel option to allow a custom function to run when the file upload is canceled.
Onclearqueue
Setting the Onclearqueue option allows a custom function to run when the upload queue is emptied (activating the Ancel method).
OnDestroy
The event is triggered when the Uploadify instance is destroyed (called the Destroy method).
Ondialogclose
This event is triggered when the Browse File dialog box is closed. If the event is added to the Overrideevents property, the default error message will not pop up when an error occurs in adding files to the queue.
Ondialogopen
The event is triggered before the Browse File dialog box is opened.
Ondisable
The event is triggered when the Disable method is called to disable an uploadify instance.
Onenable
The event is triggered when the Disable method is called to enable the Uploadify instance.
Onfallback
The event is triggered when the browser detects a compatible version of Flash.
OnInit
The event is triggered at the end of the call to Uploadify initialization.
Onqueuecomplete
This event is triggered when all the files in the queue are processed.
OnSelect
This event is triggered every time a file is added to the upload queue.
Onselecterror
The event is triggered when a file return error is selected. Each file that returns an error triggers the event.
Onswfready
This event is triggered when the Flash button is loaded.
Onuploadcomplete
Each file upload completes, triggering the event, whether the upload succeeds or the upload fails.
Onuploaderror
This event is triggered when an upload fails.
Onuploadprogress
The event is triggered when the upload progress update occurs.
Onuploadstart
The event is triggered immediately before the upload is started.
Onuploadsuccess
This event is triggered when each file upload succeeds.
Cancel
Cancels the upload object.
Destroy
Destroys the Uploadify instance and returns the original file field.
Disable
Controls whether the browse button is available.
Settings
Returns or updates the value of a uploadify instance.
Stop
Stops the current upload.
Upload
Uploads all files in the specified file or queue.
Uploadfy API Chinese Documentation