flash上传附件 uploadify3.0详细说明

Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文，因为插件在js里用了一个转码方法把这个参数的值转过码了，解码的地方在那个swf文件里，看不到代码，所以这条路不行。

另一个参数，网上很少提到，是 buttonImg( 按钮图片)，这时你完全可以用一个图片来替换掉插件自带的那个黑色的flash浏览按钮，只要你自己的图片上是中文，这不就解决了中文按钮问题么？如果只加这一个，你会发现你的按钮图片下面有一片白色区域，其实就是那个flash留下的，白色区域表示鼠标可用范围，这个范围可以用width,height来调整。还有一个参数 wmode 它的默认值是opaque，把它改成transparent就行了，也就是把那片白色区域透明化

如果您在上传的过程中出现了乱码，无非是程序编码和系统编码不一致造成的，于是尝试修改uploadify.php文件。您可以尝试将move_uploaded_file($tempFile,$targetFile);   修改为move_uploaded_file($tempFile,iconv("UTF-8","gb2312", $targetFile));   刷新页面，上传中文文件。

下面介绍一下它的一些参数：

      uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后弹出打开文件对话框，默认值：uploadify.swf。

　　script ： 后台处理程序的相对路径 。默认值：uploadify.php

　　checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径

　　fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata

　　method ： 提交方式Post 或Get 默认为Post

　　scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain

　　folder ： 上传文件存放的目录 。

　　queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。

　　queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。

　　multi ： 设置为true时可以上传多个文件。

　　auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。

　　fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本。

　　fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。

　　sizeLimit ： 上传文件的大小限制 。

　　simUploadLimit ： 允许同时上传的个数 默认值：1 。

　　buttonText ： 浏览按钮的文本，默认值：BROWSE 。

　　buttonImg ： 浏览按钮的图片的路径 。

　　hideButton ： 设置为true则隐藏浏览按钮的图片 。

　　rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。

　　width ： 设置浏览按钮的宽度 ，默认值：110。

　　height ： 设置浏览按钮的高度 ，默认值：30。

　　wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。

　　cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标

上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作。

onSelect ：选择文件时触发，该函数有三个参数

• event:事件对象。
• queueID：文件的唯一标识，由6为随机字符组成。
• fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。
• 
  

代码如下：

$(document).ready(function(){ $("#uploadify").uploadify({ 'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf', 'script': 'UploadHandler.ashx', 'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png', 'folder': 'UploadFile', 'queueID': 'fileQueue', 'auto': false, 'multi': true, 'onInit':function(){alert("1");}, 'onSelect': function(e, queueId, fileObj) { alert("唯一标识:" + queueId + "\r\n" + "文件名：" + fileObj.name + "\r\n" + "文件大小：" + fileObj.size + "\r\n" + "创建时间：" + fileObj.creationDate + "\r\n" + "最后修改时间：" + fileObj.modificationDate + "\r\n" + "文件类型：" + fileObj.type ); } });});

当选择一个文件后弹出的消息如下图：

onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：

• fileCount：选择文件的总数。
• filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
• filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
• allBytesTotal：所有选择的文件的总大小。

 

onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。

• fileCount：取消一个文件后，文件队列中剩余文件的个数。
• allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。

 

onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。

onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。

onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。

• type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
• info：错误的描述

 

onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。

onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：

• percentage：当前完成的百分比
• bytesLoaded：当前上传的大小
• allBytesLoaded：文件队列中已经上传完的大小
• speed：上传速率 kb/s

 

onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed

• fileCount：剩余没有上传完成的文件的个数。
• speed：文件上传的平均速率 kb/s

 

onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：

• filesUploaded :上传的所有文件个数。
• errors ：出现错误的个数。
• allBytesLoaded ：所有上传文件的总大小。
• speed ：平均上传速率 kb/s

 

相关函数介绍

在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：

uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码

$('#uploadify').uploadifySettings('folder','JS');

 

如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中

<a href="javascript:$('#uploadify').uploadifySettings('folder','JS');$('#uploadify').uploadifyUpload()">上传</a>

 

uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。

$('#uploadify').uploadifyCancel(id);

 

使用：//绑定的界面元素<input id='gallery'type='file'/>

$("#gallery").uploadify({

设置参数，参数如下.

});

设置的属性：

id: jQuery(this).attr('id'),//绑定的input的ID

langFile: '//语言包的路径，能设置所有的提示文字

swf: '//[必须设置]swf的路径

uploader: '/uploadify/galleri.php',//[必须设置]上传文件触发的url

auto:false,//文件选择完成后，是否自动上传

buttonText:'Välj Filer',//上传按钮的文字

height: 30,//上传按钮的高和宽

width: 120,

buttonCursor: 'pointer',//上传鼠标hover后Cursor的形状

cancelImage: '//[必须设置]取消图片的路径

checkExisting:'/uploader/uploadify-check-existing.php',//检查上传文件是否存，触发的url，返回1/0

debug: true,//debug模式开/关，打开后会显示debug时的信息

fileObjName:'file',

fileSizeLimit : 0,//文件的极限大小，以字节为单位，0为不限制。1MB:1*1024*1024

fileTypeDesc: 'Bild JPG',//允许上传的文件类型的描述，在弹出的文件选择框里会显示

fileTypeExts: '*.jpg',//允许上传的文件类型，限制弹出文件选择框里能选择的文件

method: 'post',//和后台交互的方式：post/get

multi: true,//是否能选择多个文件

queueID: 'fileQueue',//显示上传文件队列的元素id，可以简单用一个div来显示

queueSizeLimit : 999,//队列中允许的最大文件数目

progressData : 'all', // 'percentage''speed''all'//队列中显示文件上传进度的方式：all-上传速度+百分比，percentage-百分比，speed-上传速度

removeCompleted : true,//上传成功后的文件，是否在队列中自动删除

removeTimeout: 3,

requeueErrors : true,

postData: {},//和后台交互时，附加的参数

preventCaching : true,

transparent: true,

successTimeout : 30,//上传时的timeout

uploadLimit:999//能同时上传的文件数目

设置的事件：

onDialogClose : function(swfuploadifyQueue) {//当文件选择对话框关闭时触发
　　if( swfuploadifyQueue.filesErrored > 0 ){
　　alert( '添加至队列时有'
　　+swfuploadifyQueue.filesErrored
　　+'个文件发生错误n'
　　+'错误信息:'
　　+swfuploadifyQueue.errorMsg
　　+'n选定的文件数:'
　　+swfuploadifyQueue.filesSelected
　　+'n成功添加至队列的文件数:'
　　+swfuploadifyQueue.filesQueued
　　+'n队列中的总文件数量:'
　　+swfuploadifyQueue.queueLength);
　　}
}

onDialogOpen : function() {//当选择文件对话框打开时触发
　　alert( 'Open!');
}

onSelect : function(file) {//当每个文件添加至队列后触发
　　alert( 'id: ' + file.id
　　+ ' - 索引: ' + file.index
　　+ ' - 文件名: ' + file.name
　　+ ' - 文件大小: ' + file.size
　　+ ' - 类型: ' + file.type
　　+ ' - 创建日期: ' + file.creationdate
　　+ ' - 修改日期: ' + file.modificationdate
　　+ ' - 文件状态: ' + file.filestatus);
}

onSelectError : function(file,errorCode,errorMsg) {//当文件选定发生错误时触发
　　alert( 'id: ' + file.id
　　+ ' - 索引: ' + file.index
　　+ ' - 文件名: ' + file.name
　　+ ' - 文件大小: ' + file.size
　　+ ' - 类型: ' + file.type
　　+ ' - 创建日期: ' + file.creationdate
　　+ ' - 修改日期: ' + file.modificationdate
　　+ ' - 文件状态: ' + file.filestatus
　　+ ' - 错误代码: ' + errorCode
　　+ ' - 错误信息: ' + errorMsg);
}

onQueueComplete : function(stats) {//当队列中的所有文件全部完成上传时触发
　　alert( '成功上传的文件数: ' + stats.successful_uploads
　　+ ' - 上传出错的文件数: ' + stats.upload_errors
　　+ ' - 取消上传的文件数: ' + stats.upload_cancelled
　　+ ' - 出错的文件数' + stats.queue_errors);
}

onUploadComplete : function(file,swfuploadifyQueue) {//队列中的每个文件上传完成时触发一次
　　alert( 'id: ' + file.id
　　+ ' - 索引: ' + file.index
　　+ ' - 文件名: ' + file.name
　　+ ' - 文件大小: ' + file.size
　　+ ' - 类型: ' + file.type
　　+ ' - 创建日期: ' + file.creationdate
　　+ ' - 修改日期: ' + file.modificationdate
　　+ ' - 文件状态: ' + file.filestatus
　　+ ' - 出错的文件数: ' + swfuploadifyQueue.filesErrored
　　+ ' - 错误信息: ' + swfuploadifyQueue.errorMsg
　　+ ' - 要添加至队列的数量: ' + swfuploadifyQueue.filesSelected
　　+ ' - 添加至对立的数量: ' + swfuploadifyQueue.filesQueued
　　+ ' - 队列长度: ' + swfuploadifyQueue.queueLength);
}

onUploadError : function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {//上传文件出错是触发（每个出错文件触发一次）
　　alert( 'id: ' + file.id
　　+ ' - 索引: ' + file.index
　　+ ' - 文件名: ' + file.name
　　+ ' - 文件大小: ' + file.size
　　+ ' - 类型: ' + file.type
　　+ ' - 创建日期: ' + file.creationdate
　　+ ' - 修改日期: ' + file.modificationdate
　　+ ' - 文件状态: ' + file.filestatus
　　+ ' - 错误代码: ' + errorCode
　　+ ' - 错误描述: ' + errorMsg
　　+ ' - 简要错误描述: ' + errorString
　　+ ' - 出错的文件数: ' + swfuploadifyQueue.filesErrored
　　+ ' - 错误信息: ' + swfuploadifyQueue.errorMsg
　　+ ' - 要添加至队列的数量: ' + swfuploadifyQueue.filesSelected
　　+ ' - 添加至对立的数量: ' + swfuploadifyQueue.filesQueued
　　+ ' - 队列长度: ' + swfuploadifyQueue.queueLength);
}

onUploadProgress : function(file,fileBytesLoaded,fileTotalBytes,
queueBytesLoaded,swfuploadifyQueueUploadSize) {//上传进度发生变更时触发
alert( 'id: ' + file.id
　　+ ' - 索引: ' + file.index
　　+ ' - 文件名: ' + file.name
　　+ ' - 文件大小: ' + file.size
　　+ ' - 类型: ' + file.type
　　+ ' - 创建日期: ' + file.creationdate
　　+ ' - 修改日期: ' + file.modificationdate
　　+ ' - 文件状态: ' + file.filestatus
　　+ ' - 当前文件已上传: ' + fileBytesLoaded
　　+ ' - 当前文件大小: ' + fileTotalBytes
　　+ ' - 队列已上传: ' + queueBytesLoaded
　　+ ' - 队列大小: ' + swfuploadifyQueueUploadSize);
}

onUploadStart: function(file) {//上传开始时触发（每个文件触发一次）
　　alert( 'id: ' + file.id
　　+ ' - 索引: ' + file.index
　　+ ' - 文件名: ' + file.name
　　+ ' - 文件大小: ' + file.size
　　+ ' - 类型: ' + file.type
　　+ ' - 创建日期: ' + file.creationdate
　　+ ' - 修改日期: ' + file.modificationdate
　　+ ' - 文件状态: ' + file.filestatus );
}

onUploadSuccess : function(file,data,response) {//上传完成时触发（每个文件触发一次）
　　alert( 'id: ' + file.id
　　+ ' - 索引: ' + file.index
　　+ ' - 文件名: ' + file.name
　　+ ' - 文件大小: ' + file.size
　　+ ' - 类型: ' + file.type
　　+ ' - 创建日期: ' + file.creationdate
　　+ ' - 修改日期: ' + file.modificationdate
　　+ ' - 文件状态: ' + file.filestatus
　　+ ' - 服务器端消息: ' + data
　　+ ' - 是否上传成功: ' + response);
}

以下是可选项的参数说明：（红色的属性代表常用的)

 

1	uploader	上传控件的主体文件，flash控件    默认值='uploadify.swf'
2	script	相对路径的后端脚本，它将处理您上传的文件。 绝对路径前缀或'/'或'http'的路径   默认值='uploadify.php'
3	checkScript	检查该文件是否已经选择驻留在服务器上。 没有默认值。 官方例子中'check.php'是提供核心文件
4	scriptData	可提供URL传递参数。用来传递get参数。例如：   index.jsp?id=1&action=uploadify可以设置成： 'script': 'index.jsp', 'scriptData':{'id':1,'action':'uploadify'}, 注：要设置‘method’：‘GET’.
5	fileDataName	您的文件在上传服务器脚本阵列的名称。    默认值='Filedata'
6	method	设置为发送到后端脚本的方法。要么'get'或post'。    默认值'post'
7	scriptAccess	?
8	folder	您想将文件保存到的路径。考虑到安全问题，一般并不在客户端设定后供服务器得到所存的路径。我试了下。这个参数好像以get的方式传递的。设定post得不到这个值。
9	queueID	文件队列ID。与div的id一致。参考上一篇例子的用法。
10	queueSizeLimit	限制在一次队列中的次数（可选定几个文件）。默认值= 999，而一次可传几个文件有 simUploadLimit属性决定。
11	multi	是否允许同时上传多文件，可设定true或false。   默认false。设定true时，选中的文件是当前项。
12	auto	选定文件后是否自动上传，可设定true或false。   默认false
13	fileDesc	出现在上传对话框中的文件类型描述。与fileExt需同时使用
14	fileExt	支持的格式，启用本项时需同时声明fileDesc。 如：‘*.rar,*.doc
15	sizeLimit	控制上传文件的大小，单位byte
16	simUploadLimit	多文件上传时，同时上传文件数目限制。默认1   一次可传几个文件。
17	buttonText	默认按钮的名字。默认BROWER
18	buttonImg	使用图片按钮，设定图片的路径即可。
19	hideButton	上传按钮的隐藏。true 或false。默认flase
20	rollover	？
21	width	按钮图片的长度。默认 110
22	height	按钮图片的高度。默认 30
23	wmode	背景透明transparent 与不透明opaque设定。默认 不透明
24	cancelImg	取消按钮。设定图片路径。默认cancel.png
25	onInit	函数， 初始化时的状态。 onInit: function() {  $("#id").html("上传前");},
26	onComplete	函数：可传递五个参数 event: 事件对象 queueID: 完成文件的唯一标识符。 fileObj:     • name – 文件名   • filepath –上传路径   • size – 文件大小   • creationDate – 文件创建时间   • modificationDate –文件最近修改时间   • type –文件的扩展名 response: 服务器回调的数据 data:     • fileCount – The total number of files left in the queue   • speed – 平均上传速度 KB/s 如： onComplete: function(event, queueID, fileObj) {   alert("文件:" +fileObj.name + "上传失败");  }
27	onSelectOnce	函数：可传递二个参数 event: The event object. data: An object containing details about the select operation.   • fileCount – The total number of files in the queue   • filesSelected – The number of files selected in the select operation   • filesReplaced – The number of files that were replaced in the queue   • allBytesTotal – The total number of bytes for all files in the queue
28	onCancel	函数：可传递四个参数 event: The event object. queueID: The unique identifier of the file that was cancelled. fileObj: An object containing details about the file that was selected.    • name – The name of the file    • size – The size in bytes of the file    • creationDate – The date the file was created    • modificationDate – The last date the file was modified    • type – The file extension beginning with a '.'   data: Details about the file queue.    • fileCount – The total number of files left in the queue    • allBytesTotal – The total number of bytes left for all files in the queue
29	onClearQueue	函数：可传递一个参数 event: The event object.
30	onQueueFull	函数：可传递二个参数 • event - The event object. • queueSizeLimit - The maximum size of the queue.
31	onError	函数：可传递四个参数   event: The event object. queueID: The unique identifier of the file that was errored. fileObj: An object containing details about the file that was selected.   • name – The name of the file   • size – The size in bytes of the file   • creationDate – The date the file was created   • modificationDate – The last date the file was modified   • type – The file extension beginning with a '.' errorObj: An object containing details about the error returned.   • type – Either 'HTTP', 'IO', or 'Security'   • info – An error message describing the type of error returned
32	onOpen	函数：可传递三个参数 event: The event object. queueID: The unique identifier of the file that was opened. fileObj: An object containing details about the file that was selected.   • name – The name of the file   • size – The size in bytes of the file   • creationDate – The date the file was created   • modificationDate – The last date the file was modified   • type – The file extension beginning with a '.'
33	onProgress	函数：可传递四个参数 event: The event object. queueID: The unique identifier of the file that was updated. fileObj: An object containing details about the file that was selected.   • name – The name of the file   • size – The size in bytes of the file   • creationDate – The date the file was created   • modificationDate – The last date the file was modified   • type – The file extension beginning with a '.'   data: An object containing details about the upload and queue.   • percentage – The current percentage completed for the upload   • bytesLoaded – The current amount of bytes uploaded   • allBytesLoaded – The current amount of bytes loaded for all files in the queue   • speed – The current upload speed in KB/s
34	onSelect	event: The event object. queueID: The unique identifier of the file that was selected. fileObj: An object containing details about the file that was selected.   • name – The name of the file   • size – The size in bytes of the file   • creationDate – The date the file was created   • modificationDate – The last date the file was modified   • type – The file extension beginning with a '.'
35	onAllComplete	函数：可传递二个参数   event: The event object. data: An object containing details about the upload process.   • filesUploaded – The total number of files uploaded   • errors – The total number of errors while uploading   • allbytesLoaded – The total number of bytes uploaded   • speed – The average speed of all uploaded files
36	onCheck	函数：可传递五个参数   event: The event object. checkScript: The path to the file checking script. fileQueue: A file queue object consisting of  key/value pairs with the queue ID as the key and the filename as the value. folder: The path to the upload folder. single: True if only one file is being uploaded from the queue.