jQuery文件上传插件

http://web.bigdata001.cn/uploadify/34745815666117691706.html

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 > < link rel ="stylesheet" type ="text/css" href ="./uploadify.css" > < script type ="text/javascript" src ="./jquery.min.js" > script > < 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 > < 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 */ // 指向保存图片的目录 $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’ : '选择文件' // 此处只是为了演示可以用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

事件