Jquery Ajax文件上传插件Uploadify详解（上）

     上传文件的时候打算用Ajax方法，这样用户体验好一些，找来找去还是Uploadify好些，可惜相关的帮助文档不好找，园里有一篇可惜是2年前2.1版本的，和现在最新的3.2版差别很大，很多Option都已经取消了。唯一可用的就是官网(http://www.uploadify.com/)，里面的资料还是很详细的，所以打算把它整理成中文以便于以后查阅(Flash版Uploadify)。

• Options（选项、参数）：

Option	Input Type	Default Value	Required	Info
auto	Boolean	true		选择文件后是否自动上传，如果为false则需额外再添加一个按钮之类的去调用uploadify()函数
buttonClass	String	Empty String	√	设置Uploadify按钮CSS样式
buttonCursor	String	'hand'		设置鼠标放在Uploadify按钮上的样式，可能的值是’hand’ 、‘arrow’
buttonImage	String	null		设置按钮背景图片的地址，不过推荐写在CSS中
buttonText	String	'SELECT FILES'		设置按钮中的文字，支持中文
checkExisting	String	false		设置一个路径在服务器端检测文件是否已存在，返回1和0分别代表已存在、不存在
debug	Boolean	false		转换到调试模式
fileObjName	String	'Filedata'		设置上传的文件在服务器端的参数，比如在C#端就可以用Request.Files["Filedata"]获取上传的文件
fileSizeLimit	Number/String			上传文件大小限制，默认以KB为单位，也可传入字符串参数自定义其他单位（B/MB/GB）,设置为0代表不限制
fileTypeDesc	String	'All Files'		浏览文件对话框中文件类型的描述
fileTypeExts	String	'*.*'		限制上传文件的拓展名(i.e. ‘*.jpg; *.png; *.gif’)
formData	JSON Object	Empty Object		如字面意思，文件上传同时向后台传递的表单数据，Json格式传递
height	Number	30		按钮高度(PX)
itemTemplate	String	false		可以设置文件上传队列的HTML模版，四个模版标签：1. instanceID：当前Uploadify实例的ID；2. fileID：队列中文件的ID；3. fileName：文件名4. fileSize：文件大小。这样插入模版标签：${fileName}
method	String	'post'		提交文件上传表单的方式：”get”，”post”
multi	Boolean	True		选择文件是一次是否能选择多个
overrideEvents	JSON Array	Empty Array		你想要绕过默认事件的脚本名的数组，就是想要覆盖掉的页面事件。
preventCaching	Boolean	true		防止SWF文件缓存，默认会为SWF文件请求加上一个随机数参数
progressData	String	'percentage'		显示上传进度的方式，百分比/速度：‘percentage’ /‘speed’
queueID	String	false		可以手工设置文件上传队列的ID，默认会自动生成一个（手工设置ID后就可以自定义CSS样式了）
queueSizeLimit	Number	999		同一时间，上传文件队列的最大数量（不是可上传文件总数）。如果队列中的文件数超过此限制，onSelectError的事件被触发。
removeCompleted	Boolean	true		完成的队列是保持显示还是移除(DOM)
removeTimeout	Number	3		完成的队列移除(DOM)的时延秒数
requeueErrors	Boolean	false		如果设置为true，则返回错误，并重新排队，尝试再次上传文件
successTimeout	Number	30		文件完成上传后等待服务器返回响应的时间，如果超过这个时间将会自行断言上传成功。
swf	String	'uploadify.swf'	√	uploadify.swf文件的路径
uploader	String	'uploadify.php'	√	服务器端上传文件的脚本路径
uploadLimit	Number	999		允许上传文件的总数。如果超过这个数量onUploadError事件将会被触发
width	Number	120		按钮宽度(PX)

 

•  Events事件（函数）

Event	Arguments	Overridable	Info
onCancel	file		取消上传时触发，参数为当前文件对象
onClearQueue	queueItemCount		当’cancel’方法以’*’作为参数时触发，如$('#file_upload').uploadify('cancel','*')
onDestroy			由’destroy’方法触发
onDialogClose	queueData：包含以下队列信息：1. filesSelected浏览文件对话框中选择文件的数量 2. filesQueued：添加到队列中的文件数(没有返回错误的)3.filesReplaced：队列中的替换的文件数　4. filesCancelled：添加到队列中取消文件的数量（不是替换） 5. filesErrored:返回错误的文件数	N/A	当浏览文件窗口关闭时被触发。如果该事件被添加在overrideEvents选项中，那么若添加文件时发生错误后，不会提示默认错误信息
onDialogOpen			浏览文件窗口打开时触发
onDisable			由’disable’方法(参数为true时)触发
onEnable			由’disable’方法(参数为false时)触发
onFallback			在初始化过程中触发，如果未检测到浏览器中兼容版本的Flash player
onInit			Uploadify第一次被调用时初始化最后被调用
onQueueComplete	queueData：包含以下队列信息：uploadsSuccessful、uploadsErrored分别是上传成功/失败的文件数量		队列中文件传输完成时被调用
onSelect	file：被选择的文件对象	N/A	当每个文件被选择并添加到队列中时触发
onSelectError		N/A	当每个文件被选择时返回错误后触发
onSWFReady			Flash对象（SWF按钮）加载完成时触发
onUploadComplete	file:上传的文件对象或返回一个错误。	N/A	每个文件上传完成时，无论是成功或返回一个错误触发一次。
onUploadError	file：已经上传的文件对象 errorCode：返回的错误码 errorMsg：返回的错误信息 errorString：可读（面向用户）的错误信息，包含作物详细信息		文件上传后服务器端返回错误时触发
onUploadProgress	file：上传文件对象 bytesUploaded：已上传的字节数 bytesTotal：当前文件的总字节数 totalBytesUploaded：在当前上传操作上传的字节总数（所有文件） totalBytesTotal：总要上传的字节数（所有文件）		文件上传进度信息每次更新时触发（可用于自定义文件上传进度显示）
onUploadStart	file：即将上传的文件对象		上传文件前触发
onUploadSuccess	file：已上传文件的对象 Data：服务器端返回的数据 Response：服务器端返回的响应，成功则为true，无响应则为false	N/A	每个文件上传后服务器返回成功时触发

 

 

• Methods内置方法

Method	Arguments	Info
cancel	fileID：可以输入任意数量文件的ID，如果以“*”作为第一个参数，则队列中的所有文件将被取消。如果没有任何文件ID作为参数，则队列中的第一个文件将被取消。 suppressEvent：如果设置为true，onUploadCancel事件将被阻止。清除队列时，这是非常有用的。	上传文件时取消队列中的一个文件
destroy		清空Uploadify中所有文件输入，并返回到初始状态
disable	setDisabled：设置true/false来禁用/启用按钮
settings	Name：设置的名称。仅设置这个参数将返回值。 Value：设置的值 resetObjects：设置为true时，更新的postData对象删除现有的值。否则，新的值将被添加到现有的。	获取或设置某个Uploadify实例的设置选项（Swf文件设置无法改变）
stop		停止当前所有上传和重新排队的过程
upload	fileID：可传入多个欲上传文件的ID作为参数，如果仅以“*”作为参数，则代表所有文件	上传特定文件或队列中所有文件

 

     好了，Uploadify客户端这边的配置基本就这么多了，补充一点Uploadify 3.2的版本里取消了原先的‘cancelImg’配置选项，而是把它放到了CSS中，现在uploadify-cancel.png这张图片的路径(相对uploadify.css)默认为“../img/uploadify-cancel.png”。对于本文中出现的错误，欢迎不吝指正。在下一遍随笔里会介绍服务器端的设置，并做一些demo，现在时间也不早了。