jquery uploadify Multi-File Upload plugin usage experience

Last Update:2014-12-26 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Uploadify Official website: http://www.uploadify.com/

First, how to use it?

Website Original: http://www.uploadify.com/documentation/uploadify/implementing-uploadify/
On the basis of my understanding, do some translation, suggest direct crossing net original, because until the release of this blog, the official version is v3.2.1
Before using, let's look at the minimum requirements for use.

Requirements

JQuery 1.4.x or newer version
Flash Player 9.0.24 or newer version
Server-side implementation of File upload function (PHP, Java, etc.), that is, the need to cooperate with server-side implementation.

Use

Follow the basic steps below to implement the Uploadify upload function

1. Download the free uploadify ZIP Package Installer

2. Unzip and upload the following files to a folder on your website (for example:/js/uploadify)

Jquery.uploadify-3.1.min.js
uploadify.php (server-side processing of uploaded files)
uploadify.swf
Uploadify.css
Uploadify-cancel.png
check-exists.php

3, in front page reference JQuery JS Library

<script src= "Http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" ></script>

4. Refer to Uploadify JS Library under the jquery Library

<script src= "Js/uploadify/jquery.uploadify-3.1.min.js" ></script>

5, decorate the upload button (can be any tag element, as long as the existence of the ID)

<input type= "File" Name= "File_upload" id= "File_upload"/>

<a id= "File_upload" href= "#" > Uploads </a>

6. Initialize Uploadify JS Code

$ (function () {$ (' #file_upload '). Uploadify ({' swf ': '/js/uploadify/uploadify.swf ', ' uploader ': '/j S/uploadify/uploadify.php '//other configuration parameters or methods});

7, in the file header to introduce a CSS file, to achieve some beautiful display effect (also can modify themselves)

<link rel= "stylesheet" type= "Text/css" href= "/js/uploadify/uploadify.css"/

8. Create an Upload folder

Create an upload folder on your server (ex:/uploads) and give it the appropriate permissions (0755)

9, modify the server upload files

Modify the uploadify.php script so that it uploads directories for the upload directory you created.
The accompanying uploadify.php script file is unsafe and needs to be handled separately.
For example: If you use the CodeIgniter framework, you can use the Upload class library to implement

10. Take a look at articles that make uploadify safer

Complete!

At the end of the end of the finished HTML paste out

<!doctype html>

Second, uploadify configuration Chinese description

1. Options
Auto
Type: BOOL
Default: True
Description: Whether to upload automatically

Swf
Type: string
Default: ' uploadify.swf '
Must: Yes
Description: uploadify.swf file path, in order to avoid problems, it is recommended to use the path relative to the site root directory (although it also supports the equivalent of the current directory)

Uploader
Type: string
Default: ' uploadify.php '
Must: Yes
Description: Path to the script file where the server implements the upload function (relative to the path of the site root directory)
Custom server-side upload script: http://www.uploadify.com/documentation/uploadify/customizing-the-server-side-upload-script/

Buttonclass
Type: string
Default: '
Must: Yes
Description: Upload button to add Extra Class

Buttoncursor
Type:
Default:
Description

Buttonimage
Type: string
Default: null
Description: The upload button uses a picture instead

ButtonText
Type: string
Default: ' SELECT FILES '
Description: The text displayed by the button

Checkexisting
Type: string
Default: False
Note: When uploading, check whether the uploaded file already exists, if it is on, returns 1 when it is present, returns 0 if it does not exist.

Debug
Type: BOOL
Default: False
Note: If debug is turned on, an HTML will be generated at the end of body to display the---swfupload Instance Info---

Fileobjname
Type: string
Default: ' Filedata '
Description: The name value of the Upload field in the form (<input type= "file" Name= "Filedata" id= "File_upload"/>)
For example: PHP upload $_files[' Filedata ') get the key value

Filesizelimit
Type: int | String
Default:
Description: The file size allowed to upload, if set to 0, means no limit. This value is allowed as a number or as a string
If it is a string, the suffix is allowed (B, KB, MB, GB) For example: 2MB
If the number is the default is KB

Filetypedesc
Type: string
Default: ' All Files '
Description: After clicking the upload button, pop up the selection window to select the prompt content of the file type, if set to' Any old file want ... '
Filetypeexts
Type: string
Default: ' *. * '
Description: Allow uploading of file suffixes
For example: ' *.gif; *.jpg; *.jpeg; *.png '

FormData
Type:
Default:
Description

Width
Type: int
Default: 120
Note: The width of the button display, cannot be used after the ' px ', change the value can only use the number

Height
Type: int
Default: 30
Description: The height of the button display

ItemTemplate
Type:
Default:
Description

Method
Type: string
Default: ' Post '
Description: When uploading the method, the value can only be ' post ' or ' get '

Multi
Type: BOOL
Default: True
Description: Whether to open multi-file upload

Overrideevents
Type:
Default:
Description

Preventcaching
Type:
Default:
Description

Progressdata
Type:
Default:
Description

Queueid
Type:
Default:
Description

Queuesizelimit
Type:
Default:
Description

removecompleted
Type:
Default:
Description

Removetimeout
Type:
Default:
Description

Requeueerrors
Type:
Default:
Description

Successtimeout
Type:
Default:
Description

Uploadlimit
Type:
Default:
Description

Three, I think must know the uploadify thing

1, Uploadify is the use of flash technology to achieve multi-file upload, free

2, uploadify author also made a use of HTML5 technology to implement the multi-file upload plugin uploadifive, but the charge (5 knives)

3, uploadify since 3.1 to combine uploadify and swfupload into a JS file jquery.uploadify-3.1.min.js

4, Uploadify upload submitted to the server using the method is not AJAX, but post or get, can be configured through the method parameter, if the pro know how to use AJAX request submission trouble tell me Oh

5. Waiting to be replenished

jquery uploadify Multi-File Upload plugin usage experience

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More