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>
