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

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

UploadifyVersion 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多文件上传例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>uploadify 多文件上传例子</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>
<scriptsrc="jquery.uploadify-3.1.min.js"type="text/javascript"></script>
<linktype="text/css"href="uploadify.css">
<styletype="text/css">
body { 
    font: 13px Arial, Helvetica, Sans-serif; 
} 
.haha{ 
    color:#FFFFFF; 
} 
#queue { 
    background-color: #FFF; 
    border-radius: 3px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.25); 
    height: 103px; 
    margin-bottom: 10px; 
    overflow: auto; 
    padding: 5px 10px; 
    width: 300px; 
} 
</style>
</head>
<body>
<h1>Uploadify Demo</h1>
<form>
<div></div>
<inputname="file_upload"type="file"multiple="true">
</form>
<scripttype="text/javascript">
        $(function() { 
            $('#file_upload').uploadify({ 
                'debug'         : false, 
                'auto'          : true,             //是否自动上传, 
                'buttonClass'   : 'haha',           //按钮辅助class 
                'buttonText'    : '上传图片',       //按钮文字 
                'height'        : 30,               //按钮高度 
                'width'         : 100,              //按钮宽度 
                'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false 
                'fileObjName'   : 'files',           //默认 Filedata, $_FILES控件名称 
                'fileSizeLimit' : '1024KB',          //文件大小限制 0为无限制 默认KB 
                'fileTypeDesc'  : 'All Files',       //图片选择描述 
                'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件后缀限制 默认:'*.*' 
 'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式 
// 'formData':{ 'albumid':$("#albumid").val() }, 
//'overrideEvents': ['onUploadProgress'],  // The progress will not be updated 
                //'progressData' : 'speed',             //默认percentage 进度显示方式 
                'queueID'       : 'queue',              //默认队列ID 
                'queueSizeLimit': 20,                   //一个队列上传文件数限制 
                'removeCompleted' : true,               //完成时是否清除队列 默认true 
                'removeTimeout'   : 3,                  //完成时清除队列显示秒数,默认3秒 
                'requeueErrors'   : false,              //队列上传出错,是否继续回滚队列 
                'successTimeout'  : 5,                  //上传超时 
                'uploadLimit'     : 99,                 //允许上传的最多张数 
                'swf'  : 'uploadify.swf', //swfUpload 
                'uploader': 'uploadify.php', //服务器端脚本 
                //修改formData数据 
                'onUploadStart' : function(file) { 
                    //$("#file_upload").uploadify("settings", "someOtherKey", 2); 
                },
  //'onUploadStart' : function(file) {          //  $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()});    // }, 
                //删除时触发 
                'onCancel' : function(file) { 
                    //alert('The file ' + file.name + '--' + file.size + ' was cancelled.'); 
                }, 
                //清除队列 
                'onClearQueue' : function(queueItemCount) { 
                    //alert(queueItemCount + ' file(s) were removed from the queue'); 
                }, 
                //调用destroy是触发 
                'onDestroy' : function() { 
                    alert('我被销毁了'); 
                }, 
                //每次初始化一个队列是触发 
                'onInit' : function(instance){ 
                    //alert('The queue ID is ' + instance.settings.queueID); 
                }, 
                //上传成功 
                'onUploadSuccess' : function(file, data, response) { 
                    //alert(file.name + ' | ' + response + ':' + data); 
                }, 
                //上传错误 
                'onUploadError' : function(file, errorCode, errorMsg, errorString) { 
                    //alert('The file ' + file.name + ' could not be uploaded: ' + errorString); 
                }, 
                //上传汇总 
                'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { 
                    $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.'); 
                }, 
                //上传完成 
                'onUploadComplete' : function(file) { 
                    //alert('The file ' + file.name + ' finished processing.'); 
                }, 
            }); 
        }); 
        //变换按钮 
        function changeBtnText() { 
            $('#file_upload').uploadify('settings','buttonText','继续上传'); 
        } 
        //返回按钮 
        function returnBtnText() { 
            alert('The button says ' + $('#file_upload').uploadify('settings','buttonText')); 
        } 
</script>
<h4>操作:</h4>
<ahref="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a>  |  
<ahref="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a>  |  
<ahref="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a>  |  
<ahref="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a>  |  
<ahref="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a>  |  
<ahref="javascript:$('#file_upload').uploadify('stop');">停止上传</a>  |  
<ahref="changeBtnText();"< /span>>变换按钮</a>  |  
<h4>大小:</h4>
<divid="progress"></div>
</body>
</html>

注意:此插件不支持断点续传

更多相关文章
  • JQuery上传插件Uploadify使用详解
    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载.官方下载官方文档官方演示首先按下面的步骤来实现一个简单的上传功能.1 创建Web项目,命名为 ...
  • JQuery上传插件Uploadify使用详解asp.net版
    先来一个实例 Uploadify插件是JQuery的一个文件支持多文件上传的上传插件,ajax异步上传,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先 ...
  • 前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来:首先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误, ...
  • 文件上传利器JQuery上传插件Uploadify
    在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:http://www.uploadify.com/ 插件下载地址:http://www.uploadify ...
  • ASP.NETMVC4中Jquery上传插件Uploadify简单使用-版本:3.2.1
    $( $('#btn_upload' uploader: '/article/upload', swf: '/Content/uploadify/uploadify.swf' buttonText: "选择文件", height: 34, width: 82, fileTypeE ...
  • Uploadify v3.2.1  上传图片并预览前端JSP:<script type="text/javascript">                             $(function() {                 $("#upl ...
  • 一.限制上传大小.图片尺寸    $('#select').uploadify({         'swf': '/plugin/uploadify/uploadify.swf',         'uploader': '/work/imageUploadServlet.up',         ...
  • <script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthentication.FormsCookieName]==null ? string.Empty : Request ...
一周排行
  •    对于在线用户来说,常常因为流量过高,程序bug,依赖故障,线程死锁,配置错误等导致系统不用下面介绍一些常用Java故障工具排除问题.一.常用工具:    JDK 自身提供了一系列的Java故障排除工具,虽然简单 ...
  • gitlab工作流程简介
    gitlab工作流程简介 新建项目流程 创建/导入项目 可以选择导入github.bitb ...
  • Java中的变量与对象有区别吗?引子:变量与对象变量是Java中最基本的存储单元,为变量赋值可以使用赋值表达式.如:int i = 10; 该表达式的含义是将一个字面量(literal)10赋值给一个类型为int型的 ...
  • 背景 基于Windows认证的Web application, 通过Visual Studio 2013创建的LocalDB位于App_Data目录下 现象 本地调试没有任何问题.发布到服务器(Windows Ser ...
  • 玩转Heartbeat,快速实现高可用性集群
    Heartbeat实验环境:我们采用虚拟机:VMware 6.0.5操作系统:RedHat ...
  • 申明:本连载的文章来自:Nginx官网.张 宴BLOG.linuxtone论坛.互联网.本人原创.并尽力在官网文档的基础发表原创作品.并保证文档的质量与错误率.如有作者认为本文有涉及版权问 题请与我联系: liuyu ...
  •  iOS 支持多个层次的多线程编程,层次越高的抽象程度越高,使用起来也越方便,也是苹果最推荐使用的方法.下面根据抽象层次从低到高依次列出iOS所支持的多线程编程范式:1, Thread;2, Cocoa operat ...
  • 这样的语句 [self release]; 乍看上去让人很困惑.从release方法本身的作用上来说,就是给self的引用技术减一,就像release对其他对象所做的一样.一般来说,唯一用到,也是最合适使用 [sel ...
  • 一 本系列随笔概览及产生的背景 本系列开篇受到大家的热烈欢迎,这对博主是莫大的鼓励,此为本系列第四篇,希望大家继续支持,为我继续写作提供动力. 自己开发的豆约翰博客备份专家软件工具问世3年多以来,深受广大博客写作和阅 ...
  • 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备).开发者们都知道在高端智能手机系统中有两种应用程 ...