本文详细介绍基于Flash的jQuery文件上传插件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
扫一扫
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
