Uploadify 笔记分享 -- 2014年10月18日

最近要做一个项目，有个部分需要用到Uploadify，以前用过，但不是很懂，找了无数遍的中文文档，发现好多都是以前的，都不能用，一时间索性自己写了个笔记，随用随查

<form>

<input id="file_upload" name="file_upload" type="file" multiple="true">

<div id="fileQueue"></div>

</form>

<input type="image" src="uploadify/img/upload.jpg" onclick="$('#file_upload').uploadify('upload', '*');" />

<input type="image" src="uploadify/img/cancel.jpg" onclick="$('#file_upload').uploadify('cancel', '*');" />

<script type="text/javascript">

$(function() {

$('#file_upload').uploadify({

'swf': 'uploadify/uploadify.swf',	flash地址              必须
'uploader': 'uploadify.php',	上传的后台地址       必须
'buttonImage': 'uploadify/img/add.jpg',	上传按钮的替换图片
'buttonClass': 'my-uploadify-button',	按钮样式
'width': 102,	按钮宽度
'height'   : 50,	按钮高度
'auto': false,	是否自动上传
'queueID':'fileQueue'	显示的上传内容所在的DIV 的ID
'buttonText': '上传文件',	上传按钮的显示文本
'fileSizeLimit' : '100KB',	限制文件大小     0为不限制
'fileTypeDesc' : 'Any old file you want...',	文件类型下拉框
'fileTypeExts' : '*.gif; *.jpg; *.png',	上传文件的类型
'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1}	向后台发送Json数据
'multi'    : false,	false为单个上传  true多文件上传
'queueSizeLimit' : 5,	最多同时上传5个
'removeTimeout' : 10,	上传完成后  10秒钟从队列中移除
'requeueErrors': true	如果上传错误 将重新上传
'successTimeout' : 5,	等待服务器响应时，超过5秒  假设上传成功
'onCancel' : function(file) { alert('The file ' + file.name + ' was cancelled.'); }	从队列中删除一个文件时触发
'onClearQueue' : function(queueItemCount) { alert(queueItemCount + ' file(s) were removed from the queue'); }	取消上传时触发
'onDialogClose'  : function(queueData) { alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.'); }	当选择文件窗口关闭时触发
'onDialogOpen' : function() { $('#message_box').html('The file dialog box was opened...'); }	当选择文件窗口打开时触发
<input type="file" name="file_upload" id="file_upload" /> <a href="javascript:$('#file_upload').uploadify('disable', true);">Disable Uploadify</a> 'onDisable' : function() { alert('You have disabled Uploadify!'); }	使上传按钮失效，失效触发onDisable
<input type="file" name="file_upload" id="file_upload" /> <a href="javascript:$('#file_upload').uploadify('disable', false);">Enable Uploadify</a> 'onEnable' : function() { alert('You can use Uploadify again.'); }	使上传按钮生效，生效触发onEnable
'onFallback' : function() { alert('Flash was not detected.'); }	引发了在初始化期间如果没有检测到一个兼容的版本的Flash浏览器。
'onInit'   : function(instance) { alert('The queue ID is ' + instance.settings.queueID); }	Uploadify初始化完成时
'onQueueComplete' : function(queueData) { alert(queueData.uploadsSuccessful + ' files were successfully uploaded.'); }	上传成功时触发 uploadsSuccessful 成功地完成了上传的数量 uploadsErrored 上传的数量返回一个错误
'onSelect' : function(file) { alert('The file ' + file.name + ' was added to the queue.'); }	选中文件  单击保存之后触发 如果选中多个文件会多次触发
'onSelectError' : function() { alert('The file ' + file.name + ' returned an error and was not added to the queue.'); }	返回的错误代码。 可以使用以下常量在确定错误代码: QUEUE_LIMIT_EXCEEDED -文件数量选择将队列的大小通过设置的限制。 FILE_EXCEEDS_SIZE_LIMIT——文件的大小超过了设定的限制。 ZERO_BYTE_FILE——文件没有大小。 INVALID_FILETYPE——文件类型不匹配的文件类型的限制。
'onUploadError' : function(file, errorCode, errorMsg, errorString) { alert('The file ' + file.name + ' could not be uploaded: ' + errorString); }	上传错误时触发 file 上传的文件对象 errorCode 返回的错误代码 errorMsg 返回的错误消息 errorString 人类可读的错误消息包含所有的细节错误
<div id="progress"></div> 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.'); }	file 上传的文件对象 bytesUploaded 已经上传的字节数 单个文件 bytesTotal 文件的字节总数   单个文件   totalBytesUploaded 已经上传的字节数   全部文件 totalBytesTotal 文件的总字节数    全部文件
'onUploadStart' : function(file) { alert('Starting to upload ' + file.name); }	即将上传的对象
'onUploadSuccess' : function(file, data, response) { alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data); }	file  成功上传文件对象 data  服务器端脚本返回的数据( response 到底上传成功了没有如果成功为true

});

});

</script>