首页 > 代码库 > Uploadify 笔记分享 -- 2014年10月18日
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="http://www.mamicode.com/uploadify/img/upload.jpg" onclick="$(‘#file_upload‘).uploadify(‘upload‘, ‘*‘);" />
<input type="image" src="http://www.mamicode.com/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>
Uploadify 笔记分享 -- 2014年10月18日