当前位置: 首页 > 编程日记 > 正文

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

相关文章:

AI 还原康乾盛世三代皇帝的样貌,简直太太太好玩了!

作者 | Jack Cui出品 | AI科技大本营一位 B 站 up 主「Jack Cui」使用 AI 技术&#xff0c;还原了康熙、雍正、乾隆的历史样貌。看看富态的雍正&#xff01;&#xff01;算法实现人工智能技术&#xff0c;可以实现很多有趣而又有意义的事情。 利用 StyleGAN 算法&#xff0c;可…

男人一生中要做的事

作者&#xff1a;未知 请作者速与本人联系揽住母亲的肩头&#xff1a; 每个人都是最棒的&#xff0c;父体的千万个细胞中最强壮的一个才能跑到最前面与来自母体的细胞结合。这时&#xff0c;有二分之一的机会会诞生一个男人。儿子&#xff0c;无疑是父亲所有理想的最好载体&am…

【BZOJ2157】旅游

2157: 旅游 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 1460 Solved: 656[Submit][Status][Discuss]Description Ray 乐忠于旅游&#xff0c;这次他来到了T 城。T 城是一个水上城市&#xff0c;一共有 N 个景点&#xff0c;有些景点之间会用一座桥连接。为了方便游客到…

PHP面向对象精要

1 使用extends实现继承以及重载、魔术方法的含义 class B extends A 声明的时候B里可以没有A里的方法 调用的时候$bnew B(); $b->A里的方法(); $b->A里的属性1; $b->B里的方法(); $b->B里的方法(); 如果$anew A(); 可以 $a->A里的方法(); $a->A里…

码农新机会!2019-2020行业调查报告出炉,这个领域程序员缺口很大!

近日&#xff0c;CSDN发布了《2019-2020中国开发者调查报告》&#xff0c;本报告从2004年开始针对一年一度的CSDN开发者大调查数据分析结果形成&#xff0c;是迄今为止覆盖国内各类开发者人群数量最多、辐射地域、行业分布最广的调查活动。笔者从本次调查中&#xff0c;挑选出一…

线性代数与矩阵论 定理 1.5.6 拉格朗日插值公式

给定域$\mathbf{F}$中$n1$个不同的数$\alpha_1,\alpha_2,\cdots,\alpha_{n1}$,以及域$\mathbf{F}$中另外$n1$个数$\beta_1,\beta_2,\cdots,\beta_{n1}$,则唯一存在域$\mathbf{F}$中一个次数不超过$n$的多项式$f(x)$,使得$f(\alpha_j)\beta_j,1\leq j\leq n1$,其中 \begin{equat…

Android的ToolBar

ToolBar比ActionBar更加可控&#xff0c;自由。因此&#xff0c;Google 逐渐使用ToolBar来代替ActionBar。 使用ToolBar 1.要引入appCompat_v7支持 2.主题设置为NoActionBar 在style.xml文件中 <style name"MyAppTheme" parent"Theme.AppCompat.Light.NoActi…

利用.NET的XML序列化解决系统配置问题

作者&#xff1a;未知 请作者速与本人联系 出自&#xff1a; http://blog.csdn.net/ycl111/在Web系统开发中&#xff0c;我们经常需要读取和设置一些系统配置项&#xff0c;常见的例如数据库连接字符串、上传路径等等。在最初的ASP系统中&#xff0c;比较常用的方法是将值保存…

告别CNN?一张图等于16x16个字,计算机视觉也用上Transformer了

编译 | 凯隐出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;Transformer是由谷歌于2017年提出的具有里程碑意义的模型&#xff0c;同时也是语言AI革命的关键技术。在此之前的SOTA模型都是以循环神经网络为基础&#xff08;RNN, LSTM等&#xff09;。从本质上来讲&…

mysql left join,right join,inner join用法分析

2019独角兽企业重金招聘Python工程师标准>>> 下面是例子分析 表A记录如下&#xff1a; aID aNum 1 a20050111 2 a20050112 3 a20050113 4 a20050114 5 a20050115 表B记录如下: bID bName 1 2006032401 2 2006032402 3 2006032403 4 200603240…

如果BarTender出现卸载不干净的问题如何处理

自从BarTender 2016出了之后&#xff0c;好多小伙伴都想试试新功能咋样&#xff0c;这就意味着首先要卸载电脑上旧版BarTender。然而就是这个操作&#xff0c;难倒了好一批人&#xff0c;他们表示BarTender卸载卸不干净&#xff0c;不仅旧版的用不起来了&#xff0c;新版BarTen…

iometer硬盘测试工具附教程

教程地址http://servers.pconline.com.cn/skills/0711/1145597.html转载于:https://blog.51cto.com/cywin7/1081456

Python炫技操作:模块重载的五种方法

作者 | 写代码的明哥来源 | Python编程时光环境准备新建一个 foo 文件夹&#xff0c;其下包含一个 bar.py 文件$ tree foofoo└── bar.py 0 directories, 1 filebar.py 的内容非常简单&#xff0c;只写了个 print 语句print("successful to be imported")只要 bar.…

使用Powershell管理Linux 下的 SQL Server

使用Powershell管理Linux 下的 SQL Server我们上一篇文章介绍了在Centos 7.3下安装及配置 SQL Server&#xff0c;今天我们主要介绍的是如何在Windows下使用Powershell来管理Linux下的SQL Server&#xff0c;其实说到Powershell大家都已经很熟悉了&#xff0c;Powershell不止是…

这么多年,终于有人讲清楚Transformer了

作者 | Jay Alammar译者 | 香槟超新星&#xff0c;责编 | 夕颜来源 | CSDN&#xff08;ID:CSDNnews&#xff09;注意力机制是一种在现代深度学习模型中无处不在的方法&#xff0c;它有助于提高神经机器翻译应用程序性能的概念。在本文中&#xff0c;我们将介绍Transformer这种模…

提高IIS网站服务器的效率的八种方法 (转载)

作者&#xff1a;未知 请作者速与本人联系以下是提高IIS 5.0网站服务器的执行效率的八种方法&#xff1a; 1. 启用HTTP的持续作用可以改善15~20%的执行效率。 2. 不启用记录可以改善5~8%的执行效率。 3. 使用 [独立] 的处理程序会损失20%的执行效率。 4. 增加快取记忆体的保存…

搭建Docker私有仓库--自签名方式

为了能集中管理我们创建好的镜像&#xff0c;方便部署服务&#xff0c;我们会创建私有的Docker仓库。通读了一遍官方文档&#xff0c;Docker为了确保安全使用TLS,需要CA认证&#xff0c;认证时间长的要钱啊&#xff0c;免费过期时间太短&#xff0c;还是用自签名比较简单。 准备…

Visual C# .NET 2003 语言的改变

Visual C# .NET 2003 语言的改变 Prashant Sridharan Microsoft Corporation 2002年12月30日 适用于&#xff1a; Microsoft Visual Studio C# 2003 摘要&#xff1a;为了与欧洲计算机制造商协会 (ECMA) 的 C# 规范完全兼容&#xff0c;Microsoft Corporation 对 C# 编译器的…

.net内存管理与指针

本人前段时间准备做个TIN三角网的程序&#xff0c;思想是是分割合并法&#xff0c;分割的同时建立平衡二叉树&#xff0c;然后子树建三角网并相互合并&#xff0c;再向上加入父亲的点集。由于我对.net语言熟点&#xff0c;就准备用c#语言实现。但是不知从那听过当建立的类型只想…

强化学习是针对优化数据的监督学习?

作者 | Ben Eysenbach、Aviral Kumar、Abhishek Gupta 编译 | 凯隐出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;强化学习&#xff08;RL&#xff09;可以从两个不同的视角来看待&#xff1a;优化和动态规划。其中&#xff0c;诸如REINFORCE等通过计算不可微目标期…

solrcloud Read and Write Side Fault Tolerance

2019独角兽企业重金招聘Python工程师标准>>> SolrCloud supports elasticity, high availability, and fault tolerance in reads and writes. What this means, basically, is that when you have a large cluster, you can always make requests to the cluster: …

XML的二十个热点问题

http://www.netqu.com 中华技术网会员 Wuxuehui 发布翻译&#xff1a;Chen Zhihong 编辑&#xff1a;孙一中这些日子,几乎每个人都在谈论XML (Extensible Markup Language)&#xff0c;但是很少有人真正理解其含义。XML的推崇者认为它能够解决所有HTML不能解决的问题&#xff0…

5G+云网融合,移动云带领开发者释放边缘计算的力量

在5G浪潮的驱动下&#xff0c;智能设备、自动驾驶、VR/AR等对于实时性、本地性有着较强需求的场景日益丰富&#xff0c;边缘计算应运而生&#xff0c;有效提升了用户体验。众所周知&#xff0c;边缘计算技术的突破&#xff0c;意味着许多控制将通过本地设备实现而无需交由云端&…

Linux下模拟RAID5实现磁盘损坏,数据自动切换到备份磁盘上

另一个博客地址&#xff1a;www.rsyslog.org Linux社区 RAID5磁盘配额&#xff0c; 1块磁盘&#xff0c;分5个分区模拟5块磁盘&#xff0c;其中4个做成RAID5分区&#xff0c;剩余一个作为冗余磁盘&#xff0c;挂载到/data1目录&#xff0c;模拟其中一块磁盘损坏&#xff0c;冗…

jsp9大内置对象

转载于:https://www.cnblogs.com/xtdxs/p/6523059.html

RHCSA 解析-01

这是RHCSA题目开始正式做题前的准备部分。 后面会陆续连载部分类似的题型极其解法。 考试时间&#xff1a;RHCSA 2.5小时 总分300分&#xff0c;210分pass考试环境&#xff1a;考试为上机考试&#xff0c;在一台真实机系统中&#xff0c;已经预安装好虚拟机&#xff0c;要求所…

关于Visual C#装箱与拆箱的研究

关于Visual C#装箱与拆箱的研究2004-09-15 作者&#xff1a; 出处&#xff1a; CSDN在对这个问题展开讨论之前&#xff0c;我们不妨先来问这么几个问题&#xff0c;以系统的了解我们今天要探究的主题。观者也许曾无数次的使用过诸如System.Console类或.NET类库中那些品种繁多的…

Imagination推出全新多核GPU IP系列:提供33种不同配置,AI算力达24 TOPS

近日&#xff0c;致力于打造半导体和软件知识产权&#xff08;IP&#xff09; Imagination Technologies宣布推出全新的IMG B系列&#xff08;IMG B-Series&#xff09;图形处理器&#xff08;GPU&#xff09;&#xff0c;进一步扩展了其GPU知识产权&#xff08;IP&#xff09;…

ES6: 字符串

现在ES6增加了很多的字符串的方法&#xff0c;但是有些感觉自己也不是很懂&#xff0c;所以就罗列了一些平常的用的。 includes&#xff0c; startsWith&#xff0c; endsWith includes(): 返回布尔值&#xff0c;表示是否找到了参数字符串&#xff1b;startsWith(): 返回布尔值…

警惕!新版Net Transport(影音传送带)安装有猫腻

http://article.pcpop.com/show.aspx?topic_id1317935由于早些时候FlashGet和NetAnts&#xff08;网络蚂蚁&#xff09;迟迟没有新版本发布&#xff0c;Net Transport&#xff08;影音传送带&#xff09;趁虚而入&#xff0c;以免费且支持流媒体下载迅速获得了网民的青睐。不过…