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,一经查实,立即删除!

相关文章

imagick php 缩放,php使用imagick模块实现图片缩放、裁剪、压缩示例

PHP 使用Imagick模块 缩放&#xff0c;裁剪&#xff0c;压缩图片 包括gif图片缩放 裁剪代码如下:/*** 图片裁剪* 裁剪规则&#xff1a;* 1. 高度为空或为零 按宽度缩放 高度自适应* 2. 宽度为空或为零 按高度缩放 宽度自适应* 3. 宽度&#xff0c;高度到不为空或为…

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

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

课时47.datalist标签(了解)

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

pandas.read_csv参数详解

读取CSV&#xff08;逗号分割&#xff09;文件到DataFrame也支持文件的部分导入和选择迭代更多帮助参见&#xff1a;http://pandas.pydata.org/pandas-docs/stable/io.html参数&#xff1a;filepath_or_buffer : str&#xff0c;pathlib。str, pathlib.Path, py._path.local.Lo…

Gradle – Maven的观点

正如我博客的读者所知道的&#xff0c; 我有点像Maven迷 。 我从2007年8月左右开始使用Maven&#xff0c;从没有回过头。 但是&#xff0c;就像其他所有情况一样&#xff0c;“变化是唯一不变的”。 现在这个领域还有其他参与者&#xff0c;Gradle看起来是最有前途的。 我决定试…

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图像的可解译性。相干斑噪声通常作…

Linux下用netstat查看网络状态、端口状态

在linux一般使用netstat 来查看系统端口使用情况步。 netstat命令是一个监控TCP/IP网络的非常有用的工具&#xff0c;它可以显示路由表、实际的网络连接以及每一个网络接口设备的 netstat命令的功能是显示网络连接、路由表和网络接口信息&#xff0c;可以让用户得知目…

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

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

微信自动回复

http://itchat.readthedocs.io/zh/latest/tutorial/tutorial0/。 这个是学习网址&#xff0c;到时候自己学一下。做个案例试试转载于:https://www.cnblogs.com/lilinzhiyu/p/7985864.html

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

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

appcan php图片上传,appcan文件上传php,asp通用

首先说appcan内部实现了file标签&#xff0c;我们就不用纠结这个问题了&#xff0c;还提供了上传百分比哦&#xff0c;然后下面的方法按从上到下依次看&#xff0c;很简单。上传php&#xff0c;asp页面很简单 &#xff0c;接收‘file_data’这个文件信息就可以了&#xff0c;如…

javascript 动态修改css样式

方法一&#xff1a;改变外联css文件&#xff0c;这里不讲这个。 方法二&#xff1a;通过改变claaName来改变样式&#xff0c;语法&#xff1a; obj.className "style2";//或者obj.setAttribute("class", "style2"); 方法三&#xff1a;使用obj…

POJ 3225 Help with Intervals(线段树)

POJ 3225 Help with Intervals 题目链接 集合数字有的为1&#xff0c;没有为0&#xff0c;那么几种操作相应就是置为0或置为1或者翻转&#xff0c;这个随便推推就能够了&#xff0c;然后开闭区间的处理方式就是把区间扩大成两倍&#xff0c;偶数存点&#xff0c;奇数存线段就可…

在Spring中嵌入HSQLDB服务器实例

我一直在愉快地使用XAMPP进行开发&#xff0c;直到不得不将其托管在可通过Internet访问的某个地方&#xff0c;供客户端进行测试和使用。 我有一个仅具有384 RAM的VPS&#xff0c;并且需要快速找到一种方法&#xff0c;因此决定将XAMPP安装到VPS中。 由于内存不足&#xff0c;因…

python与材料计算公式_《从问题到程序:用Python学编程和计算》——2.11 补充材料-阿里云开发者社区...

本节书摘来自华章计算机《从问题到程序&#xff1a;用Python学编程和计算》一书中的第2章&#xff0c;第2.11节&#xff0c;作者 裘宗燕&#xff0c;更多章节内容可以访问云栖社区“华章计算机”公众号查看。2.11 补充材料本书各章的主要内容将围绕着怎样通过编程解决计算问题…

centos 6.9 NTP基准时间服务器配置

时间服务器端 yum install ntp -y vim /etc/ntp.conf 增加允许客户端访问 restrict 192.168.0.0 mask 255.255.0.0 nomodify 配置成自启动 chkconfig ntpd on service ntpd start 客户端配置 每天对时一次 crontab -e * 2 * * * ntpdate 192.168.139.130 转载于:https://www.cn…

hsdfz -- 6.16 -- day1

恩这回不写游记了 按照老师要求记录今天的心里路程&#xff1a;这题似乎可做期望得分150->日部分分似乎不是很显然->a题似乎是结论题&#xff0c;大力猜一波结论->过不了样例&#xff0c;先看b题->b题动态树&#xff0c;似乎可以肝lct->不会维护重链&#xff0c…

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

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

强制Tomcat通过SLF4J / Logback登录

因此&#xff0c;您将JAR可执行Web应用程序与Tomcat捆绑在一起 &#xff08;请务必先阅读其中一个&#xff09;。 但是&#xff0c;开头有这些烦人的Tomcat日志&#xff0c;与我们的应用程序日志无关&#xff0c;并且不可自定义&#xff1a; Nov 24, 2012 11:44:02 PM org.apa…