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>

时间: 2024-10-24 10:01:06

Uploadify 笔记分享 -- 2014年10月18日的相关文章

豆豆 - 遥远的救世主(2014年10月18日)

<遥远的救世主> 作 者:豆豆 译 者: 系 列: 出 版:作家出版社 字 数:460千字 阅读完成:2014年10月18日

2014年10月17~10月18日,杨学明老师《软件测试管理》实战班公开课在北京成功举办!

2014年10月17-18日,<软件测试管理>公开课在北京市朝阳区某酒店成功举办!来自互联网.机电.软件.仪表.物联网.医疗等企业的研发负责人和测试部门经理等参加了此次培训,此次培训由著名研发管理专家杨学明主讲,本次课程采用全程案例分析讲解,让学员从一开始就融入到软件测试的场景中去,根据测试中所遇问题进行针对性讲解和讨论:每一个知识点的讲解都有相应的工具和模板支撑,从而使学员所学的知识在工作中能真正使用起来,也解决了培训不能落地的难题: 培训结束后许多企业表示将引进杨老师的内训和咨询服务.

【每日圣经日历】2014年10月3日

Vendredi le 3 Octobre 2014 礼拜五 2014年10月3日 Faites en tout temps par l'Esprit toutes sortes de prières et de supplications. Veillez à cela avec une entière persévérance, et priez pour tous les saints.                                                    

【每日圣经日历】2014年10月4日

Samedi le 4 Octobre 2014 礼拜六 2014年10月4日 Que le mariage soit honoré de tous, et le lit conjugal exempt de souillure, car Dieu jugera les impudiques et les adultères.                                                                    Hébreux 13. 4 婚姻,人

【每日圣经日历】2014年10月16日

注:移动用户(特别是苹果(Ipad))可以全选文字使用机器朗读 Jeudi le 16 Octobre 2014 礼拜四 2014年10月16日 Ceux qui avaient pour demeure les ténèbres et l'ombre de la mort Vivaient captifs dans la misère et dans les chanes, Parce qu'ils s'étaient révoltés contre les paroles de Dieu,

【每日圣经日历】2014年10月7日

Mardi le 7 Octobre 2014 礼拜二 2014年10月7日 Près de la croix de Jésus se tenaient sa mère et la soeur de sa mère, Marie, femme de Clopas, et Marie de Magdala.Jésus, voyant sa mère, et auprès d'elle le disciple qu'il aimait, dit à sa mère: Femme, voilà ton

【每日圣经日历】2014年10月13日

注:移动用户(特别是苹果(Ipad))可以全选文字使用机器朗读 Lundi le 13 Octobre 2014 礼拜一 2014年10月13日 Il a été maltraité et opprimé, Et il n'a point ouvert la bouche, \nSemblable à un agneau qu'on mène à la boucherie, A une brebis muette \ndevant ceux qui la tondent; Il n'a poin

【每日圣经日历】2014年10月15日

注:移动用户(特别是苹果(Ipad))可以全选文字使用机器朗读 Mercredi le 15 Octobre 2014 礼拜三 2014年10月15日 Et à la neuvième heure, Jésus s'écria d'une voix forte: lo, lo, lama sabachthani? ce qui signifie: Mon Dieu, mon Dieu, pourquoi m'as-tu abandonné?                            

【每日圣经日历】2014年10月1日

Mercredi le 1 Octobre 2014 礼拜三 2014年10月1日 Car il viendra un temps où les hommes ne supporteront pas la saine doctrine; mais, ayant la démangeaison d'entendre des choses agréables, ils se donneront une foule de docteurs selon leurs propres désires, dé