uploadify是一个基于flash的jquery文件上传插件，此外其作者还开发了一个html5版本的上传插件uploadifive，功能相对较多但要收取一小部分费用，本文主要介绍基于flash的uploadify.特点环境要求一个简单的示例配置选项事件特点支持多文件上传上传进
正文
uploadify是一个基于flash的jquery文件上传插件，此外其作者还开发了一个html5版本的上传插件uploadifive，功能相对较多但要收取一小部分费用，本文主要介绍基于flash的uploadify.
特点
环境要求
一个简单的示例
配置选项
事件
特点
支持多文件上传
上传进度实时显示
可自定义上传限制,包括文件大小、文件数量、文件类型等
高度可定制性，几乎所有方面都可自定义
环境要求（v3.2.1）
jQuery 1.4.x或以上
flash player 9.0.24或以上
一个简单的应用示例（php版）
下载uploadify并解压，解压后将以下文件放入你的网站目录下
jquery.uploadify.min.js //uploadify核心文件
uploadify.php //服务器端上传处理脚本
uploadify.swf //flash文件
uploadify.css //样式文件
uploadify-cancel.png//上传队列中的取消按钮图片
创建一个内容如下的index.html文件作为上传表单页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>uploadify简单示例</title>
<!--uploadify样式表-->
<link rel="stylesheet" type="text/css" href="./uploadify.css">
<!--jquery库-->
<script type="text/javascript" src="./jquery.min.js"></script>
<!--uploadify插件-->
<script type="text/javascript" src="./jquery.uploadify.min.js"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf', //flash文件的路径
'uploader' : 'uploadify.php' //服务器端上传处理脚本
});
});
</script>
</head>
<body>
<!--定义一个file-->
<input type="file" name="file_upload" id="file_upload" />
</body>
</html>接下来我们创建一个用于保存上传图片的目录 uploads,并给其相应的权限，然后打开uploadify.php做些改动（为了保持简单，我们把token的验证放到后面的安全 部分）
<?php
/*
Uploadify
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
// 指向保存图片的目录
$targetFolder = '/uploads';
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
//目标目录
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
//目标路径
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
// 文件类型
$fileTypes = array('jpg','jpeg','gif','png');
$fileParts = pathinfo($_FILES['Filedata']['name']);
//根据后缀名做文件类型判断
if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
echo '1';
} else {
echo 'Invalid file type.';
}
}
?>
最后，在浏览器打开index.html看到的效果如下：
点击按钮选择几张图片看下是否成功，多试几次熟悉下uploadify上传中的文件队列、进度条等。
至此，一个简单的上传功能就做好了，但现在我们的上传功能还很不完善，比如上传文件的大小、类型没有加以限制，上传错误无法跟踪等，接下来我们先详细了解一下uploadify的选项、事件及方法，然后再来完善我们的上传功能。
配置选项
swf
概括：flash文件所在路径
示例：
'swf' : './uploadify/uploadify.swf
uploader
概括：服务器端上传处理脚本路径
示例：
‘uploader’ : '/upload.php'
auto
概述：是否自动上传，如果设置为true 在选择完成后队列中的文件将自动上传
默认：true
buttonClass
概述：为上传按钮添加样式类名，覆盖自带的样式类(.uploadify-button)
buttonCursor
概述：鼠标悬浮在按钮时的样式
可选值：hand(手形)、arrow(箭头)
默认：arrow
buttonImage
概述：设置按钮的背景图片，默认的background-position为 center top,当鼠标悬浮时background-position为center bottom,这意味着可以把一张高度刚好为按钮高度2被的图 片作为背景，上半部分作为普通状态的按钮背景，下半部分作为鼠标经过时的背景。（最好还是在css中为按钮指定相应的样式，此项只是为了提供便利）
示例：
‘buttonImage’ : './images/button.jpg'
一个按钮图片示例：
buttonText
概述： 按钮文字内容，可以支持html元素
默认：‘SELECT FIELS’
示例：
‘buttonText’ : '<span style="color:red;">选择文件</span>' //此处只是为了演示可以用html元素，关于按钮的样式建议在css中修改
checkExisting
概括：一个脚本路径，用于检测当前要上传的文件名是否已经存在于目标文件夹，当存在时脚本应返回1，不存在返回0
示例：
‘checkExisting’ : './check-exists.php'
脚本示例（php）：
<?php
$targetFolder = '/upload'; //目标文件夹
if (file_exists($_SERVER['DOCUMENT_ROOT'] . $targetFolder . '/' . $_POST['filename'])) {
echo 1;
} else {
echo 0;
}
?>
debug
概述： 如果设置为true将开启SWFUpload的调试模式，页面底部将显示相关的上传调试信息
默认：false
设置为true后将现一些细节信息，如下所示：
---SWFUpload Instance Info---
Version: 2.2.0 2009-03-25
Movie Name: SWFUpload_0
Settings:
upload_url: /uploadify/uploadify.php
flash_url: /uploadify/uploadify.swf?preventswfcaching=1452090720519
use_query_string: false
requeue_on_error: false
http_success:
assume_success_timeout: 30
file_post_name: Filedata
post_params: [object Object]
file_types: *.*
file_types_description: All Files
file_size_limit: 0
file_upload_limit: 0
file_queue_limit: 999
debug: true
prevent_swf_caching: true
button_placeholder_id: file_upload
button_placeholder: Not Set
button_image_url: /documentation/uploadify/debug/
button_width: 120
button_height: 30
button_text:
button_text_style: color: #000000; font-size: 16pt;
button_text_top_padding: 0
button_text_left_padding: 0
button_action: -110
button_disabled: false
custom_settings: [object Object]
Event Handlers:
swfupload_loaded_handler assigned: false
file_dialog_start_handler assigned: true
file_queued_handler assigned: true
file_queue_error_handler assigned: true
upload_start_handler assigned: true
upload_progress_handler assigned: true
upload_error_handler assigned: true
upload_success_handler assigned: true
upload_complete_handler assigned: true
debug_handler assigned: true
SWF DEBUG: SWFUpload Init Complete
SWF DEBUG:
SWF DEBUG: ----- SWF DEBUG OUTPUT ----
SWF DEBUG: Build Number: SWFUPLOAD 2.2.0
SWF DEBUG: movieName: SWFUpload_0
SWF DEBUG: Upload URL: /uploadify/uploadify.php
SWF DEBUG: File Types String: *.*
SWF DEBUG: Parsed File Types:
SWF DEBUG: HTTP Success: 0
SWF DEBUG: File Types Description: All Files (*.*)
SWF DEBUG: File Size Limit: 0 bytes
SWF DEBUG: File Upload Limit: 0
SWF DEBUG: File Queue Limit: 999
SWF DEBUG: Post Params:
SWF DEBUG: ----- END SWF DEBUG OUTPUT ----
SWF DEBUG:
fileObjName概述：上传文件对象在服务端脚本的名称，例如：设置为'myfile'，则在php脚本中用$_FILE['myfile']获取， 默认：'Filedata'
fileSizeLimit
概述：上传文件大小限制，可以为数字或字符串，可以接收带单位的值(B,KB,MB,GB),默认单位为KB，如果设置为0则不限制 示例：
'fileSizeLimit' : '2MB' //如果不加单位则默认以KB为单位
fileTypeDesc
概述：可选文件的文字描述，显示在选择文件对话框的下拉框处
fileTypeExts
概述：可上传文件类型，多个用分号隔开如：*.jpg; *.png; *.gif .此处只是简单的限制，应当在服务器端脚本再次做文件类型限制
示例：
'fileTypeExts' : '*.jpg;*.png;*.gif'
formData
概述：JSON对象，提交的附加数据，如果想动态的设置这些值，需要在onUploadStart事件中用settings方法来实现
默认：{}
height
概括：按钮高度，单位为像素(px)
默认：30
width
概括：按钮宽度，单位为像素(px)
默认：120
itemTemplate
概述： 队列项html模板，有4个标签可以用：标签用法如 ${fileName}
instanceID: uploadify实例id
fileID:添加到队列的文件id
fileName:添加到队列的文件名称
fileSize:添加到队列的文件大小
默认：false
method
概述：提交方法，post或get
默认：'post'
multi
概述：是否允许每次选择多个文件，如果设置为false则不允许按住ctrl或shift多选
默认：true
overrideEvents
概述：想要绕过默认脚本的事件，数组形式
默认：[]
preventCaching
概述：如果设置为true,则会在SWF文件url后添加一个随机值，以防止缓存 默认：false
progressData
概述：上传进度的显示方式，可选择percentage和speed 默认：'percentage'
queueID
概述：队列容器id,队列项将被添加到里面，如果没设置则会动态生成 默认：false
queueSizeLimit
概述：每次可加入队列的最大数，当单次选择的文件数超过这个值的时候将会触发onSelectError事件
默认：999
removeCompleted
概述 : 自动移除已经完成的队列项
removeTimeout
概述：传输完成后几秒钟移除
默认：3
requeueErrors
概述：如果设置为true，返回错误的文件将被重新加入队列并再次尝试上传 默认：false
successTimeout
概述：上传成功后的等待时间（秒），如果上传结束后超过这个时间服务器还没响应，则SWF文件会默认已经成功 默认：30
uploadLimit
概述：允许上传的文件数，当超过这个数量时会触发onUploadError事件
默认：999
