jQuery文件上传控件 Uploadify 详解

时间:2021-05-26

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件。

要求使用jquery1.4或以上版本,flash player 9.0.24以上。

有两个版本,一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。

官网:http://plete: function(file){ //在每一个文件上传成功或失败之后触发,返回上传的文件对象或返回一个错误,如果你想知道上传是否成功,最后使用onUploadSuccess或onUploadError事件 }, onUploadError: function(file,errorCode,erorMsg,errorString){ }, //一个文件完成上传但返回错误时触发,有以下参数 onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){ $('#pregress').html('总共需要上传'+bytesTotal+'字节,'+'已上传'+totalBytesTotal+'字节') }, //每更新一个文件上传进度的时候触发,返回以下参数 onUploadStart: function(file){ console.log('start update') }, //每个文件即将上传前触发 onUploadSuccess: function(file,data,respone){ alert( 'id: ' + file.id + ' - 索引: ' + file.index          + ' - 文件名: ' + file.name          + ' - 文件大小: ' + file.size          + ' - 类型: ' + file.type          + ' - 创建日期: ' + file.creationdate          + ' - 修改日期: ' + file.modificationdate          + ' - 文件状态: ' + file.filestatus          + ' - 服务器端消息: ' + data          + ' - 是否上传成功: ' + response); } //每个文件上传成功后触发 })

方法:

Uploadify使用jquery推荐的插件模式,这意味着所有方法的调用都保持在一个命名空间里。 调用这些不同的方法,只需要把方法当成第一个参数传进uploadify里调用就行。在这些方法后面增加参数会被传进这个方法里(这两句翻译得不是很顺畅,附原文: To use the different method calls, simply call Uploadify on the DOM element with the method call as the first argument.Any additional arguments added after the method name are passed to the method.)

cancel:取消第一个上传的文件,如果后面带参数"*"则是取消掉整个上传队列,如$(el).uploadify('cancel', '*')

upload:上传第一个上传的文件,如果后面带参数"*"则上传整个队列,跟cancel一样

destroy:移除掉上传组建,按html默认的方法上传

disable:有true or false 两个参数,表示是否禁止上传按钮,true表示禁止,false表示允许上传

settings:返回或者更新一个实例的方法值,接受一个方法名的参数时是返回那个方法的值,当后面再跟一个参数,则是更新那个方法的值。如

$(el).uploadify('settings','buttonText','BROWSE'); //设置buttonText的值为BROWSE$(el).uploadify('settings','buttonText') //返回buttonText的值

stop:停止正在上传中的文件或队列

下载demo

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章