query上传插件uploadify参数详细分析

query上传插件uploadify参数详细分析

Uploadify Version 3.2

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

注:文件包里有两个js分别是:jquery.uploadify.js 和 jquery.uploadify.min.js,两者其实一样,只需载入其中一个js即可。很明显jquery.uploadify.min.js是封装好了的,开发人员推荐使用前者。



Options选项设置

auto    选择文件后自动上传
buttonClass    给“浏览按钮”加css的class样式
buttonCursor    鼠标移上去形状:arrow箭头、hand手型(默认)
buttonImage    鼠标移上去变换图片
buttonText    按钮文字
checkExisting    在目录中检查文件是否已上传成功(1 ture,0 false)
debug        是否显示调试框(默认不显示false)
fileObjName    设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata,$tempFile = $_FILES['Filedata']['tmp_name']
fileSizeLimit    设置允许上传文件最大值B, KB, MB, GB 比如:'fileSizeLimit' : '20MB'
fileTypeDesc    选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认:All Files
fileTypeExts    允许上传的文件类型。格式:'fileTypeExts' : '*.gif; *.jpg; *.png'
formData    附带值,需要通过get or post传递的额外数据,需要结合onUploadStart事件一起使用
height        “浏览按钮”高度px
itemTemplate    <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。
method        上传方式。默认:post
multi        选择文件时是否可以【选择多个】。默认:可以true
overrideEvents    不执行默认的onSelect事件
preventCaching    随机缓存值 默认true ,可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突
progressData    进度条上显示的进度:有百分比percentage和速度speed。默认百分比
queueID        给“进度条”加背景css的ID样式。文件选择后的容器ID
queueSizeLimit    允许多文件上传的数量。默认:999
removeCompleted    上传完成后队列是否自动消失。默认:true
removeTimeout    上传完成后队列多长时间后消失。默认 3秒    需要:'removeCompleted' : true,时使用
requeueErrors    队列上传出错,是否继续回滚队列,即反复尝试上传。默认:false
successTimeout    上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认:30秒
swf        swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略
uploader    上传处理程序URL,本参数不可省略
uploadLimit    限制总上传文件数,默认是999。指同一时间,如果关闭浏览器后重新打开又可上传。
width        “浏览按钮”宽度px

Events 事件
onCancel    当取消一个上传队列中的文件时触发,删除时触发 
onClearQueue    清除队列。当'cancel'方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数(另外的按钮)
onDestroy    取消所有的上传队列(另外的按钮)
onDialogClose    当选择文件对话框关闭时触发,不论是点的'确定'还是'取消'都会触发.如果本事件被添加进了'overrideEvents'参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出
onDialogOpen    当选择文件框被打开时触发,没有传过来的参数
onDisable    关闭上传
onEnable    开启上传
onFallback    检测FLASH失败调用
onInit        每次初始化一个队列时触发
onQueueComplete    当队列中的所有文件上传完成时触发
onSelect    当文件从浏览框被添加到队列中时触发
onSelectError    选择文件出错时触发
onSWFReady    flash准备好时触发
onUploadComplete当一个文件上传完成时触发
onUploadError    当文件上传完成但是返回错误时触发
onUploadProgress上传汇总
onUploadStart    一个文件上传之间触发(动态改变参数的值,此方法很重要,当在多文件跨服务器上传时,你要给每个文件赋值不同的OnlyKey,即修改formData数据,服务器上的文件和数据库的OnlyKey一致,必须用到此方法)

onUploadSuccess    每个上传完成并成功的文件都会触发本事件

Methods 方法
cancel        取消一个上传队列
destroy        取消所有上传队列
disable        禁止点击“浏览按钮”
settings    返回或修改一个 uploadify实例的settings值
stop        停止当前的上传并重新添加到队列中去
upload        上传指定的文件或者所有队列中的文件

 

uploadify多文件上传例子:

 

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
    2. <html xmlns="http://www.w3.org/1999/xhtml">   
    3. <head>   
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
    5. <title>uploadify 多文件上传例子</title>   
    6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>   
    7. <script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script>   
    8. <link rel="stylesheet" type="text/css" href="uploadify.css">   
    9. <style type="text/css">   
    10. body {   
    11.     font: 13px Arial, Helvetica, Sans-serif;   
    12. }   
    13. .haha{   
    14.     color:#FFFFFF;   
    15. }   
    16. #queue {   
    17.     background-color: #FFF;   
    18.     border-radius: 3px;   
    19.     box-shadow: 0 1px 3px rgba(0,0,0,0.25);   
    20.     height: 103px;   
    21.     margin-bottom: 10px;   
    22.     overflow: auto;   
    23.     padding: 5px 10px;   
    24.     width: 300px;   
    25. }   
    26. </style>   
    27. </head>   
    28.    
    29.    
    30. <body>   
    31.     <h1>Uploadify Demo</h1>   
    32.     <form>   
    33.         <div id="queue"></div>   
    34.         <input id="file_upload" name="file_upload" type="file" multiple="true">   
    35.     </form>   
    36.        
    37.     <script type="text/javascript">   
    38.         $(function() {   
    39.             $('#file_upload').uploadify({   
    40.                 'debug'         : false,   
    41.                 'auto'          : true,             //是否自动上传,   
    42.                 'buttonClass'   : 'haha',           //按钮辅助class   
    43.                 'buttonText'    : '上传图片',       //按钮文字   
    44.                 'height'        : 30,               //按钮高度   
    45.                 'width'         : 100,              //按钮宽度   
    46.                 'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false   
    47.                 'fileObjName'   : 'files',           //默认 Filedata, $_FILES控件名称   
    48.                 'fileSizeLimit' : '1024KB',          //文件大小限制 0为无限制 默认KB   
    49.                 'fileTypeDesc'  : 'All Files',       //图片选择描述   
    50.                 'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件后缀限制 默认:'*.*'   
    51.                 'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式   
    52. // 'formData':{ 'albumid':$("#albumid").val() },                
    53. //'overrideEvents': ['onUploadProgress'],  // The progress will not be updated   
    54.                 //'progressData' : 'speed',             //默认percentage 进度显示方式   
    55.                 'queueID'       : 'queue',              //默认队列ID   
    56.                 'queueSizeLimit': 20,                   //一个队列上传文件数限制   
    57.                 'removeCompleted' : true,               //完成时是否清除队列 默认true   
    58.                 'removeTimeout'   : 3,                  //完成时清除队列显示秒数,默认3秒   
    59.                 'requeueErrors'   : false,              //队列上传出错,是否继续回滚队列   
    60.                 'successTimeout'  : 5,                  //上传超时   
    61.                 'uploadLimit'     : 99,                 //允许上传的最多张数   
    62.                 'swf'  : 'uploadify.swf', //swfUpload   
    63.                 'uploader': 'uploadify.php', //服务器端脚本   
    64.    
    65.    
    66.                 //修改formData数据   
    67.                 'onUploadStart' : function(file) {   
    68.                     //$("#file_upload").uploadify("settings", "someOtherKey", 2);   
    69.                 },
    70. //'onUploadStart' : function(file) { // $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()}); // },   
    71.                 //删除时触发   
    72.                 'onCancel' : function(file) {   
    73.                     //alert('The file ' + file.name + '--' + file.size + ' was cancelled.');   
    74.                 },   
    75.                 //清除队列   
    76.                 'onClearQueue' : function(queueItemCount) {   
    77.                     //alert(queueItemCount + ' file(s) were removed from the queue');   
    78.                 },   
    79.                 //调用destroy是触发   
    80.                 'onDestroy' : function() {   
    81.                     alert('我被销毁了');   
    82.                 },   
    83.                 //每次初始化一个队列是触发   
    84.                 'onInit' : function(instance){   
    85.                     //alert('The queue ID is ' + instance.settings.queueID);   
    86.                 },   
    87.                 //上传成功   
    88.                 'onUploadSuccess' : function(file, data, response) {   
    89.                     //alert(file.name + ' | ' + response + ':' + data);   
    90.                 },   
    91.                 //上传错误   
    92.                 'onUploadError' : function(file, errorCode, errorMsg, errorString) {   
    93.                     //alert('The file ' + file.name + ' could not be uploaded: ' + errorString);   
    94.                 },   
    95.                 //上传汇总   
    96.                 'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {   
    97.                     $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');   
    98.                 },   
    99.                 //上传完成   
    100.                 'onUploadComplete' : function(file) {   
    101.                     //alert('The file ' + file.name + ' finished processing.');   
    102.                 },   
    103.                 
    104.             });   
    105.         });   
    106.    
    107.    
    108.         //变换按钮   
    109.         function changeBtnText() {   
    110.             $('#file_upload').uploadify('settings','buttonText','继续上传');   
    111.         }   
    112.    
    113.    
    114.         //返回按钮   
    115.         function returnBtnText() {   
    116.             alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));   
    117.         }   
    118.     </script>   
    119.     <h4>操作:</h4>    
    120.     <a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a>  |    
    121.     <a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a>  |    
    122.     <a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a>  |    
    123.     <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a>  |    
    124.     <a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a>  |    
    125.     <a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a>  |    
    126.     <a href="changeBtnText();"< /span>>变换按钮</a>  |    
    127.     <h4>大小:</h4>   
    128.     <div id='progress'></div>    
    129. </body>   
    130. </html>  
posted on 2013-10-16 14:36 傻蛋他哥 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/xiaoguangxi/p/3372199.html

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

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

相关文章

type_traits应用

工作遇到这样的例子&#xff0c;对不同数据进行计算处理&#xff0c;得到一组结果集&#xff0c;包括计数、比例等。各个计算处理过程不同&#xff0c;结果集数据结构相同&#xff0c;但并非所有计算过程均有计数、比例的结果&#xff0c;有些可能只有计数&#xff0c;有些只有…

那些不能错过的XCode插件

XCode颜色显示插件ColorSense代码里的那些冷冰冰的颜色数值&#xff0c;到底时什么颜色&#xff1f;如果你经常遇到这个问题&#xff0c;每每不得不运行下模拟器去看看&#xff0c;那么这个插件绝对不容错过。更彪悍的是你甚至可以点击显示的颜色面板&#xff0c;直接通过系统的…

用JSLint精炼提升JavaScript代码

由于移动应用的盛行和HTML5的广泛运用&#xff0c;JavaScript正越来越流行。JavaScript受欢迎的部分原因是因为它的灵活便捷&#xff0c;你可以快速上手&#xff0c;它不需要重量级的开发环境&#xff0c;也不需要第三方应用支持&#xff0c;只要你打开一个文本编辑器&#xff…

网页选项卡的应用

&#xff08;1&#xff09;功能描述&#xff1a; 在页面中&#xff0c;设置三个不同名称的选项卡&#xff0c;当单机某个选项卡时&#xff0c;下面相对应的区域显示其内容信息&#xff0c;同时选项卡的背景色与内容信息的背景色浑然一体&#xff0c;并且字体加粗&#xff0c;表…

工欲善其事必先利其器系列之:在VS里面折叠js代码

之前用vs写js的时候经常因为js代码过长而且不能像cs文件里面的方法一样进行折叠而抓狂,直到在扩展库发现了这款插件有了它就可以把代码进行折叠了 插件地址转载于:https://www.cnblogs.com/Chendaqian/p/3396702.html

python- 基础 map方法

python中map()函数 map()是 Python 内置的高阶函数&#xff0c;它接收一个函数 f 和一个 list&#xff0c;并通过把函数 f 依次作用在 list 的每个元素上&#xff0c;得到一个新的 list 并返回。 例如&#xff0c;对于list [1, 2, 3, 4, 5, 6, 7, 8, 9] 如果希望把list的每个…

C算法编程题(二)正螺旋

前言 上一篇《C算法编程题&#xff08;一&#xff09;扑克牌发牌》 写东西前总是喜欢吐槽一些东西&#xff0c;还是多啰嗦几句吧&#xff0c;早上看了一篇博文《谈谈外企涨工资那些事》&#xff0c;里面楼主讲到外企公司包含的五类人&#xff0c;其实不只是外企如此&#xff0c…

scrapy框架-post使用

scrapy中使用FormRequest向网页提交数据 Scrapy post使用 如何post data&#xff1a; http://httpbin.org/post FormRequest : post请求 GitHub Login 借助浏览器分析登陆行为。 分析post的内容先尝试一次错误的登陆&#xff1a;如下&#xff1a;分析&#xff1a;需要post…

Oracle行列转换小结

目录结构如下&#xff1a;行转列列转行[一]、行转列 1.1、初始测试数据 表结构&#xff1a;TEST_TB_GRADE Sql代码 create table TEST_TB_GRADE ( ID NUMBER(10) not null, USER_NAME VARCHAR2(20 CHAR), COURSE VARCHAR2(20 CHAR), SCORE FLOAT ) 初始…

python- 进阶 与flask的搭配使用---定时任务框架APScheduler学习详解

APScheduler简介 在平常的工作中几乎有一半的功能模块都需要定时任务来推动&#xff0c;例如项目中有一个定时统计程序&#xff0c;定时爬出网站的URL程序&#xff0c;定时检测钓鱼网站的程序等等&#xff0c;都涉及到了关于定时任务的问题&#xff0c;第一时间想到的是利用ti…

Mingw下g++编译执行顺序错误

今天写一个简单的线性表时&#xff0c;用Mingw中的g编译、调试、运行时发现一个奇怪的现象&#xff1a;程序的执行顺序与实际编写顺序不一致。 编译环境&#xff1a;代码编写 win7下 editplus Mingw 4.3.3 g 代码片段如下&#xff1a; 1 //function: create a list 2 //ti…

HDTV(1920x1080)码率和视频质量关系的研究 2 (实验结果)

上一篇文章中介绍了实验的准备工作&#xff0c; HDTV&#xff08;1920x1080&#xff09;码率和视频质量关系的研究 1 &#xff08;前期准备&#xff09; 本文介绍一下实验的结果。 首先来看一下主观评价的试验结果&#xff1a; 从实验结果来看&#xff0c;可以得出以下结论&…

NGUI如何创建自己的精灵图集

说实话其实很简单,但是在不知道的情况下真的不好弄啊. 1. 选择你要制作精灵图集的图片,可以选择多张 2. 提倡使用快捷键Alt Shift M 会有如下窗口弹出,也可以NGUI --> Open-->Atlas Maker打开 我们看到在Sprites里面就是我们选择的要制作图集的图片 当在Replace后面的输…

VMware虚拟机与宿主无法复制的解决办法

由于工作需要&#xff0c;上网机器使用虚拟机&#xff0c;因此需要经常来回的拷贝文件&#xff0c;而vmware从6.5一直走来到10.0.1&#xff0c;总是有一个问题很让人苦恼---共享粘贴板总是会无故失效。经常实验&#xff0c;发现可以经过以下方法临时解决一下&#xff0c;虽然不…

我感觉我恰似一个呆逼

TicTacToe V2.0。 非要用1-9来输入的结果就是使用二维数组这件事的意义变得非常难找。 留个遗体&#xff0c;我要改回坐标输入了。 1 public class Game {2 String chessBoard;3 String[][] pieces new String[3][3];4 5 /** 初始化棋盘样式和棋子数组。*/6 …

[企业化NET]Window Server 2008 R2[3]-SVN 服务端 和 客户端 基本使用

1. 服务器基本安装即问题解决记录 √ 2. SVN环境搭建和客户端使用 2.1 服务端 和 客户端 安装 √ 2.2 项目建立与基本使用 √ 2.3 基本冲突解决,并版&#xff0c;tags 3. 数据库安装 4. 邮件服务器搭建 5. JIRA环境搭建和使用 6. CC.NET项目持续发布工具…

关于 mysql.test 数据库

国内私募机构九鼎控股打造APP&#xff0c;来就送 20元现金领取地址&#xff1a;http://jdb.jiudingcapital.com/phone.html内部邀请码&#xff1a;C8E245J &#xff08;不写邀请码&#xff0c;没有现金送&#xff09;国内私募机构九鼎控股打造&#xff0c;九鼎投资是在全国股份…

Python中strip()、lstrip()、rstrip()用法详解

Python中strip()、lstrip()、rstrip()用法详解 Python中有三个去除头尾字符、空白符的函数&#xff0c;它们依次为: strip&#xff1a; 用来去除头尾字符、空白符(包括\n、\r、\t、 &#xff0c;即&#xff1a;换行、回车、制表符、空格) lstrip&#xff1a;用来去除开头字符、…

HDU 4121 Xiangqi 模拟题

题目&#xff1a; http://acm.hdu.edu.cn/showproblem.php?pid4121 首先对标题赞一个&#xff0c;非要叫 “Xiangqi” 而不是 ”中国象棋“ 或者 ”Chinese chess“ 。。 然后是题意&#xff1a;黑棋只剩下一个”将“了&#xff0c;红棋各种 ”车” “马” “炮“&#xff0c;…

Python3的方法解析顺序(MRO)

Python 2.3 的新式类的 C3 算法。它也是 Python 3 唯一支持的方式(笔者使用python3&#xff0c;所以就先讲这种的) 一个例子&#xff1a; class D(object): pass class E(object): pass class F(object): pass class C(D, F): pass class B(E, D): …