jquery文件上传控件 Uploadify

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

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

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

 

官网:http://www.uploadify.com/

控件截图:

用法:

首先引用下面的文件

<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>

创建一个file input,或者其它任何带ID的元素,并对其初始化Uploadify(注意目录下要有uploadify.swf这个文件,和uploadify.php后台文件,路径按项目中的目录结构)

<input type="file" name="file_upload" id="file_upload" />
<script>$(function(){$('#file_upload').uploadify({'swf'      :'uploadify.swf','uploader':'uploadify.php'// Put your options here
       });});
</script>

这样子就完成了一个最基础的上传组建。基本原理是改变你创建的file input生成一个DOM结构,创建一个DIV按钮,按钮样式修改在uploadify.css文件中的.uploadify-button,将swf文件定位在按钮上面,这样当你点击按钮时实际上点击的是swf

Options:

$('#file_upload').uploadify({auto:false, //接受true or false两个值,当为true时选择文件后会自动上传;为false时只会把选择的文件增加进队列但不会上传,这时只能使用upload的方法触发上传。不设置auto时默认为truebuttonClass: "some-class", //设置上传按钮的classbuttonCursor: 'hand',//设置鼠标移到按钮上的开状,接受两个值'hand'和'arrow'(手形和箭头)buttonImage: 'img/browse-btn.png', //设置图片按钮的路径(当你的按钮是一张图片时)。如果使用默认的样式,你还可以创建一个鼠标悬停状态,但要把两种状态的图片放在一起,并且默认的放上面,悬停状态的放在下面(原文好难表达啊:you can create a hover state for the button by stacking the off state above the hover state in the image)。这只是一个比较便利的选项,最好的方法还是把图片写在CSS里面。buttonText: '<div>选择文件</div>',//设置按钮文字。值会被当作html渲染,所以也可以包含html标签checkExisting: '/uploadify/check-exists.php',//接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1,不存在时返回0(应该主要是作为后台的判断吧),默认为falsedebug: false,//开启或关闭debug模式fileObjName:'filedata',//设置在后台脚本使用的文件名。举个例子,在php中,如果这个选项设置为'the_files',你可以使用$_FILES['the_files']存取这个已经上传的文件。fileSizeLimit:'100MB',//设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串,接受一个单位(B,KB,MB,GB)。如果是数字则默认单位为KB。设置为0时表示不限制fileTypeExts: '*.*',//设置允许上传的文件扩展名(也就是文件类型)。但手动键入文件名可以绕过这种级别的安全检查,所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')fileTypeDesc: 'All Files',//可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。(chrome下不支持,会显示为'自定义文件',ie and firefox下可显示描述)
                formData: {timestamp: '<?php echo $timestamp;?>',token: '<?php echo md5('unique_salt' . $timestamp);?>'},//通过get或post上传文件时,此对象提供额外的数据。如果想动态设置这些值,必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法:http://www.uploadify.com/documentation/uploadify/formdata/height: 30,//设置按钮的高度(单位px),默认为30.(不要在值里写上单位,并且要求一个整数,width也一样)width: 120,//设置按钮宽度(单位px),默认120itemTemplate:false,//模板对象。给增加到上传队列中的每一项指定特殊的html模板。模板格式请看官网http://www.uploadify.com/documentation/uploadify/itemtemplate/method:'post',//提交上传文件的方法,接受post或get两个值,默认为postmulti: false,//设置是否允许一次选择多个文件,true为允许,false不允许
                overrideEvents: [],//重写事件,接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖preventCaching:true,//是否缓存swf文件。默认为true,会给swf的url地址设置一个随机数,这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)progressData: 'percentage',//设置文件上传时显示数据,有‘percentage’ or ‘speed’两个参数(百分比和速度)queueID: false,//设置上传队列DOM元素的ID,上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为falsequeueSizeLimit: 999,//设置每一次上传队列中的文件数量。注意并不是限制总的上传文件数量(那是uploadLimit).如果增加进队列中的文件数量超出这个值,将会触发onSelectError事件。默认值为999removeCompleted: true,//是否移除掉队列中已经完成上传的文件。false为不移除removeTimeout: 3,//设置上传完成后删除掉文件的延迟时间,默认为3秒。如果removeCompleted为false的话,就没意义了requeueErrors: false,//设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传successTimeout: 30,//设置文件上传后等待服务器响应的秒数,超出这个时间,将会被认为上传成功,默认为30秒swf: 'uploadify.swf',//swf的相对路径,必写项uploader: 'uploadify.php'//服务器端脚本文件路径,必写项uploadLimit: 999//上传文件的数量。达到或超出这数量会触发onUploadError方法。默认999})

 Events:

$('#file_upload').uploadify({    onCancel: function(file){console.log('The file'+ file.name + 'was cancelled.')},//文件被移除出队列时触发,返回file参数onClearQueue: function(queueItemCount){console.log(queueItemCount+'file(s) were removed frome the queue')},//当调用cancel方法且传入'*'这个参数的时候触发,其实就是移除掉整个队列里的文件时触发,上面有说cancel方法带*时取消整个上传队列onDestroy: function(){//调用destroy方法的时候触发
                },onDialogClose: function(queueData){console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored)},//关闭掉浏览文件对话框时触发。返回queueDate参数,有以下属性:/*filesSelected 浏览文件对话框中选取的文件数量filesQueued 加入上传队列的文件数filesReplaced 被替换的文件个数filesCancelled 取消掉即将加入队列中的文件个数filesErrored 返回错误的文件个数*/onDialogOpen:function(){//打开选择文件对话框时触发
                },onDisable:function(){//禁用uploadify时触发(通过disable方法)
                },onEnalbe: function(){//启用uploadify时触发(通过disable方法)
                },onFallback:function(){//在初始化时检测不到浏览器有兼容性的flash版本时实触发
                },onInit: function(instance){console.log('The queue ID is'+ instance.settings.queueID)},//每次初始化一个队列时触发,返回uploadify对象的实例onQueueComplete:function(queueData){console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored)},//队列中的文件都上传完后触发,返回queueDate参数,有以下属性:/*uploadsSuccessful 成功上传的文件数量uploadsErrored 出现错误的文件数量*/onSelect: function(file){console.log(file.name)},//选择每个文件增加进队列时触发,返回file参数onSelectError: function(file,errorCode,errorMsg){console.log(errorCode)console.log(this.queueData.errorMsg)},//选择文件出错时触发,返回file,erroCode,errorMsg三个参数/*errorCode是一个包含了错误码的js对象,用来查看事件中发送的错误码,以确定错误的具体类型,可能会有以下的常量:QUEUE_LIMIT_EXCEEDED:-100 选择的文件数量超过设定的最大值;FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出设定INVALID_FILETYPE:-130 选择的文件类型跟设置的不匹配errorMsg 完整的错误信息,如果你不重写默认的事件处理器,可以使用‘this.queueData.errorMsg’ 存取完整的错误信息*/onSWFReady: function(){//swf动画加载完后触发,没有参数
                },onUploadComplete: function(file){//在每一个文件上传成功或失败之后触发,返回上传的文件对象或返回一个错误,如果你想知道上传是否成功,最后使用onUploadSuccess或onUploadError事件
                },onUploadError: function(file,errorCode,erorMsg,errorString){},//一个文件完成上传但返回错误时触发,有以下参数/*file 完成上传的文件对象errorCode 返回的错误代码erorMsg 返回的错误信息errorString 包含所有错误细节的可读信息*/onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){$('#pregress').html('总共需要上传'+bytesTotal+'字节,'+'已上传'+totalBytesTotal+'字节')},//每更新一个文件上传进度的时候触发,返回以下参数/*file 正上传文件对象bytesUploaded 文件已经上传的字节数bytesTotal 文件的总字节数totalBytesUploaded 在当前上传的操作中(所有文件)已上传的总字节数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);}//每个文件上传成功后触发              
})

Methods:
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

翻译到中间的时候才发原来网上早已有中文API跟其它的例子,这里附带几个,也是我参考着翻译的资料

http://wenku.baidu.com/view/9df6ce0bde80d4d8d15a4faa.html

http://wenku.baidu.com/view/87df2673a417866fb84a8efd.html

http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

http://www.cnblogs.com/luohu/archive/2011/12/16/2290135.html

 

转载于:https://www.cnblogs.com/jj-notes/p/7026471.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370323.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php实现第三方邮箱登录_PHP实现用户异地登录提醒功能的方法

有时候你的网站账号被盗或你在别处登录操作后台时&#xff0c;右下角会弹出提示信息&#xff0c;提醒你的账号异地登录&#xff0c;或者会被强制下线。对于这种安全性要求比较高的web网站&#xff0c;很多后台管理都会做这种功能提醒。甄别自己的账号是否被盗或者是否有另一个人…

课时47.datalist标签(了解)

1.datalist标签 作用&#xff1a;给输入框绑定待选项 2.datalist格式&#xff1a; <datalist> <option>待选项内容</option> </datalist> 3.如何给输入框绑定待选列表&#xff1f; 搞一个输入框搞一个datalist列表给datalist列表标签添加一个id给…

postgis安装_从零开始,构建电子地图网站:0_2_数据处理postgis

软件安装完&#xff0c;开始数据处理。从China Historical GIS下载一份数据。一、数据下载数据来源&#xff1a;China Historical GIS&#xff1a;https://sites.fas.harvard.edu/~chgis/data/chgis/v6/先下载一份时间序列数据&#xff1a;Download CHGIS V6 TIME SERIES Datah…

sar图像去噪matlab,一种基于总曲率的SAR图像变分去噪方法与流程

本发明属于数字图像处理技术领域&#xff0c;具体涉及一种基于总曲率的SAR图像变分去噪方法。背景技术&#xff1a;&#xff1a;相干斑噪声是合成孔径雷达(Synthetic Aperture Radar&#xff0c;简称SAR)图像的重要特征&#xff0c;严重影响SAR图像的可解译性。相干斑噪声通常作…

课时2.浏览器和服务器(了解)

1.什么是浏览器&#xff1f; 浏览器就是由安装在我们电脑上的一款软件&#xff0c;QQ&#xff0c;百度影音等一样&#xff0c;都是安装在电脑上的一款软件 那这些软件之间由什么区别呢&#xff1f; 它们的区别就是它们的功能不太一样&#xff0c;QQ是用来聊天的&#xff0c;…

python 定义变量_用python解决动态的定义变量名(并给其赋值方法:大数据处理)...

前言&#xff1a;今天为大家带来的内容是&#xff1a;用python解决动态的定义变量名(并给其赋值方法&#xff1a;大数据处理)具有很好的参考价值&#xff0c;希望对大家有所帮助。喜欢本文内容的记得点赞转发收藏不迷路哦&#xff01;&#xff01;&#xff01;最近消费kafka数据…

课时39.细线表格(理解)

请你设计出以下图片里的这个样式的表格 步骤&#xff1a; 我先来制作一个两行两列的表格 2.将table里的cellspacing设置成0 外边距是不见了&#xff0c;但是和我们想要完成的图片有一定的差距&#xff0c;我们发现这样做出来的图片好像是两条线合并到了一起一样&#xff0c;实…

matlab拼碎纸片过程,碎纸片拼接复原模型

1. 引言破碎文件的拼接在司法物证复原、历史文献修复以及军事情报获取等领域都有着重要的应用。企事业、机关、院校和军队基于保密的需要&#xff0c;使用碎纸机对重要文件&#xff0c;单据以及材料进行销毁。一些重要的文件随着时间流逝&#xff0c;残破不全&#xff0c;因此&…

VC++编译MPIR 2.7.0

目录 第1章编译 2 1.1 简介 2 1.2 下载 3 1.3 解决方案 4 1.4 创建项目 5 1.5 复制文件树 6 1.6 不使用预编译头文件 8 1.7 包含目录 9 1.8 定义宏 10 1.9 编译前事件 11 1.10 修改 obj 的位置 13 1.11 编译yasm 14 1.12 编译汇编代码 …

导弹拦截

链接 分析&#xff1a;经典DP题&#xff0c;最长不下降子序列的变种&#xff0c;同时需要记录路径&#xff0c;用pre[]数组记录当前结点的前一个结点的方法很妙 1 #include "iostream"2 #include "cstdio"3 #include "cstring"4 #include "…

Spring中的@Cacheable开销

Spring 3.1引入了很棒的缓存抽象层 。 最后&#xff0c;我们可以放弃所有本地化的方面&#xff0c;装饰器和污染我们与缓存相关的业务逻辑的代码。 从那时起&#xff0c;我们可以简单地注释重量级方法&#xff0c;并让Spring和AOP机械完成工作&#xff1a; Cacheable("bo…

电工接线模拟仿真软件_VERICUT数控加工仿真软件,最强的数控加工模拟软件,你知道么?...

VERICUT数控加工仿真软件,最强的数控加工模拟软件VERICUT软件及功能简介1、VERICUT软件简介VERICUT是美国CGTech公司开发一款专业的数控加工仿真软件&#xff0c;是当前全球数控加工程序验证、机床模拟、工艺程序优化软件领域的领导者。该软件自1988年开始推向市场以来&#xf…

php数据库创建文件失败怎么回事,安装zblogPHP提示“创建c_option.php失败”解决方法...

有zblog用户反应在安装zblog的最后一步时提示“创建c_option.php失败”&#xff0c;如下图&#xff1a;本文来说明下这个问题的原因和解决办法。问题产生的原因&#xff1a;c_option.php是zblog的数据库配置文件&#xff0c;当安装完成的时候程序会自动创建这个文件。如果你的主…

CSS Variables

CSS原生变量(CSS自定义属性) 示例地址&#xff1a;https://github.com/ccyinghua/Css-Variables 一、css原生变量的基础用法 变量声明使用两根连词线"--"表示变量&#xff0c;"$color"是属于Sass的语法&#xff0c;"color"是属于Less的语法&a…

【基础中的基础】引用类型和值类型,以及引用传递和值传递

一直在博客园怼人&#xff0c;非常惭愧。所以郑重决定&#xff1a; 好好写一篇干货&#xff0c;然后再接着怼人。 这是一起帮上陈百万同学的求助&#xff0c;讲了一会之后&#xff0c;我觉得很有些普世价值&#xff0c;干脆就发到园子来。面向小白&#xff0c;高手轻拍。 我们从…

Java 7:使用NIO.2进行文件过滤–第3部分

大家好。 这是使用NIO.2系列进行文件过滤的第3部分。 对于那些尚未阅读第1 部分或第2部分的人 &#xff0c;这里有个回顾。 NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API&#xff0c;您可以执行与java.io相同的操作&#xff0c;以及许多出色的功能&#xf…

Hadoop Serialization -- hadoop序列化具体解释 (2)【Text,BytesWritable,NullWritable】

回想&#xff1a;回想序列化&#xff0c;事实上原书的结构非常清晰&#xff0c;我截图给出书中的章节结构&#xff1a;序列化最基本的&#xff0c;最底层的是实现writable接口&#xff0c;wiritable规定读和写的游戏规则 &#xff08;void write(DataOutput out) throws IOExce…

我需要多少个线程?

这取决于您的应用程序。 但是对于那些希望对如何从生产站点购买的所有昂贵内核中挤出更多资金的人来说&#xff0c;请多多包涵&#xff0c;我将阐明围绕多线程 Java应用程序的奥秘。 内容针对最典型的Java EE应用程序进行了“优化”&#xff0c;该应用程序具有Web前端&#xff…

H5网页适配 iPhoneX,就是这么简单

iPhoneX 取消了物理按键&#xff0c;改成底部小黑条&#xff0c;这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言&#xff0c;顶部&#xff08;刘海部位&#xff09;的适配问题浏览器已经做了处理&#xff0c;所以我们只需要关注底部与小黑条的适配问题即可&#…

数字校园-云资源平台 2014.10.26-人人通共享空间

近期,教育部在统计学校信息化建设情况,当中一项重要内容,作为三通两平台的一个环节,就是学校开通人人通空间的情况,网上普及了一下知识,不就是十多年前就玩的学校博客的变种吗,网上有一些产品,也是没有热闹起来,为要求而要求的多,既然要求,就来一个吧,花了几天时间,也做了一个.…