Uploadify 上传文件插件详解

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载。

•官方下载

•官方文档

•官方演示

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Uploadify</title>

<link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" type="text/css" />

<link href="JS/jquery.uploadify-v2.1.0/uploadify.css"

rel="stylesheet" type="text/css" />

<script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

<script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

</head>

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

Options选项设置

auto           :设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。

buttonClass    :给“浏览按钮”加css的class样式

buttonCursor   :鼠标移上去形状:arrow箭头、hand手型(默认)

buttonImage    :浏览按钮的图片的路径 ,鼠标移上去变换图片

buttonText     :浏览按钮的文本,默认值:BROWSE 。

checkScript    :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径

checkExisting  :在目录中检查文件是否已上传成功(1 ture,0 false)

cancelImg      :选择文件到文件队列中后的每一个文件上的关闭按钮图标,如下图:

debug    :  是否显示调试框(默认不显示false)

folder   :  上传文件存放的目录 。

fileDesc :  这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:

fileExt         : 设置可以选择的文件的类型,格式如:’*.doc;*.pdf;*.rar’ 。

fileDataName    : 设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata

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 ,默认值:30。

hideButton      : 设置为true则隐藏浏览按钮的图片 。

itemTemplate    : <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。

method          : 提交方式Post 或Get 默认为Post

multi           : 选择文件时是否可以【选择多个】。默认:可以true

overrideEvents  : 不执行默认的onSelect事件

preventCaching  : 随机缓存值 默认true ,可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突

progressData    : 进度条上显示的进度:有百分比percentage和速度speed。默认百分比

queueID         : 文件队列的ID,该ID与存放文件队列的div的ID一致。给“进度条”加背景css的ID样式。文件选择后的容器ID

queueSizeLimit  : 当允许多文件生成时,设置选择文件的个数,默认值:999 。

removeCompleted : 上传完成后队列是否自动消失。默认:true

removeTimeout   : 上传完成后队列多长时间后消失。默认 3秒    需要:’removeCompleted’ : true,时使用

requeueErrors   : 队列上传出错,是否继续回滚队列,即反复尝试上传。默认:false

rollover        : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。

sizeLimit       : 上传文件的大小限制 。

simUploadLimit  : 允许同时上传的个数 默认值:1 。

scriptAccess    : flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain

script          : 后台处理程序的相对路径 。默认值:uploadify.php

successTimeout  : 上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认:30秒

swf             : swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略

uploader        : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。

uploadLimit     : 限制总上传文件数,默认是999。指同一时间,如果关闭浏览器后重新打开又可上传。

width           : 设置“浏览按钮”宽度px ,默认值:110。

wmode           : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。

Events事件

onInit : 每次初始化一个队列时触发,做一些初始化的工作。

'onInit':function(){alert("1");

onSelect :当文件从浏览框被添加到队列中时触发.选择文件时触发,该函数有三个参数

•event:事件对象。

•queueID:文件的唯一标识,由6为随机字符组成。

•fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type 5个属性。

代码如下:

'onSelect': function(e, queueId, fileObj)

{

alert("唯一标识:" + queueId + "\r\n" +

"文件名:" + fileObj.name + "\r\n" +

"文件大小:" + fileObj.size + "\r\n" +

"创建时间:" + fileObj.creationDate + "\r\n" +

"最后修改时间:" + fileObj.modificationDate + "\r\n" +

"文件类型:" + fileObj.type

);

当选择一个文件后弹出的消息如下图:

onSelectOnce :在单文件或多文件上传时,选择文件时触发。该函数有两个参数event,data,data对象有以下几个属性:

•fileCount         :选择文件的总数。

•filesSelected   :同时选择文件的个数,如果一次选择了3个文件该属性值为3。

•filesReplaced  :如果文件队列中已经存在A和B两个文件,再次选择文件时又选择了A和B,该属性值为2。

•allBytesTotal   :所有选择的文件的总大小。

onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数,前三个参数同onSelect 中的三个参数,data对象有两个属性fileCount和allBytesTotal。

•fileCount         :取消一个文件后,文件队列中剩余文件的个数。

•allBytesTotal   :取消一个文件后,文件队列中剩余文件的大小。

onClearQueue :清除队列。当’cancel’方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数(另外的按钮).当调用函数fileUploadClearQueue时触发。有event和data两个参数,同onCancel 中的两个对应参数。

onQueueFull :当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。

onError :当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数,其中前三个参数同上,errorObj对象有type和info两个属性。

•type  :错误的类型,有三种‘HTTP’, ‘IO’, or ‘Security’

•info   :错误的描述

onOpen :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数,参数的解释同上。

onProgress :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列,在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数,前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed:

•percentage       :当前完成的百分比

•bytesLoaded     :当前上传的大小

•allBytesLoaded :文件队列中已经上传完的大小

•speed:上传速率 kb/s

onComplete:文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数,前三个参数同上。response为后台处理程序返回的值,在上面的例子中为1或0,data有两个属性fileCount和speed

•fileCount :剩余没有上传完成的文件的个数。

•speed :文件上传的平均速率 kb/s

注:fileObj对象和上面讲到的有些不太一样,onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。

onAllComplete :文件队列中所有的文件上传完成后触发。该函数有event和data两个参数,data有四个属性,分别为:

•filesUploaded :上传的所有文件个数。

•errors :出现错误的个数。

•allBytesLoaded :所有上传文件的总大小。

•speed :平均上传速率 kb/s

onDestroy:取消所有的上传队列(另外的按钮)

onDialogClose:当选择文件对话框关闭时触发,不论是点的’确定’还是’取消’都会触发.如果本事件被添加进了’overrideEvents’参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出

onDialogOpen:当选择文件框被打开时触发,没有传过来的参数

onEnable:开启上传

onDisable:关闭上传

onFallback:检测FLASH失败调用

onQueueComplete:当队列中的所有文件上传完成时触发

onSelectError:选择文件出错时触发

onSWFReady:flash准备好时触发

onUploadComplete:当一个文件上传完成时触发

onUploadError:当文件上传完成但是返回错误时触发

onUploadProgress:上传汇总

onUploadStart:一个文件上传之间触发(动态改变参数的值,此方法很重要,当在多文件跨服务器上传时,你要给每个文件赋值不同的OnlyKey,即修改formData数据,服务器上的文件和数据库的OnlyKey一致,必须用到此方法)

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

uploadifySettings:可以动态修改上面介绍的那些key值,如下面代码

<strong>$('#uploadify').uploadifySettings('folder','JS');</strong>

如果上传按钮的事件写成下面这样,文件将会上传到uploadifySettings定义的目录中

<a href="javascript:$('#uploadify').uploadifySettings('folder','JS'); $('#uploadify').uploadifyUpload()">上传</a>

uploadifyCancel:该函数接受一个queueID作为参数,可以取消文件队列中指定queueID的文件。

$('#uploadify').uploadifyCancel(id);

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>uploadify 多文件上传例子</title>

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

type="text/javascript"></script>

<script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="uploadify.css">

<style type="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 id="queue"></div>

<input id="file_upload" name="file_upload" type="file" multiple="true">

</form>

<script type="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>

<a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a>

|

<a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a>

|

<a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a> |

<a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a>

|

<a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a>

|

<a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a> |

<a href="changeBtnText();">变换按钮</a> |

<h4>大小:</h4>

<div id='progress'></div>

</body>

</html>

Uploadify 上传文件插件详解的更多相关文章

  1. jquery.uploadify上传文件配置详解(asp.net mvc)

    页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. uploadify 上传文件插件

    今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...

  3. [Plugin] JQuery.uploadify上传文件插件的使用详解For ASP.NET

    URL:http://www.cnblogs.com/xiaopin/archive/2010/01/21/1653523.html 今天下午整理文件上传的例子,感觉收集到的例子都很不人性话,后来找到 ...

  4. jquery uploadify上传文件插件导致浏览器崩溃问题解决方法

    自谷歌浏览器更新到(版本39.0.2171.99 )后,访问上传文件界面浏览器就崩溃了,而其他的浏览器不会出现问题. 出现这种问题的原因就是谷歌浏览器缓存问题,但将访问该jsp页面路径添加上时间戳后无 ...

  5. Django session cookie 上传文件、详解

    session 在这里先说session 配置URL from django.conf.urls import patterns, include, url from django.contrib i ...

  6. windows下命令行终端使用rz上传文件参数详解

    rz命令: (X) = option applies to XMODEM only (Y) = option applies to YMODEM only (Z) = option applies t ...

  7. express文件上传中间件Multer详解

    express文件上传中间件Multer详解 转载自:https://www.cnblogs.com/chengdabelief/p/6580874.html   Express默认并不处理HTTP请 ...

  8. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  9. 【iOS 使用github上传代码】详解

    [iOS 使用github上传代码]详解 一.github创建新工程 二.直接添加文件 三.通过https 和 SSH 操作两种方式上传工程 3.1https 和 SSH 的区别: 3.1.1.前者可 ...

随机推荐

  1. Map/Reduce个人实战--生成数据测试集

    背景: 在大数据领域, 由于各方面的原因. 有时需要自己来生成测试数据集, 由于测试数据集较大, 因此采用Map/Reduce的方式去生成. 在这小编(mumuxinfei)结合自身的一些实战经历, ...

  2. iOS给背景添加点击事件

    当点击背景的时候出发事件,或者跳转界面或者产生其他的响应 -(void)viewDidLoad { UIImageView * imageView  = [UIImageView alloc]init ...

  3. python 循环while和for in

    #!/uer/bin/env python # _*_ coding: utf-8 _*_ lucknumber = 5 b = 0 while b <3: print('guss count: ...

  4. Java 5种字符串拼接方式性能比较

    http://blog.csdn.net/kimsoft/article/details/3353849 import java.util.ArrayList; import java.util.Li ...

  5. sqlite3使用入门

    sqlite的安装 1. 首先是下载sqlite,可以该页面下载:http://www.sqlite.org/download.html 当前的最新版本为:sqlite-shell-win32-x86 ...

  6. POJ 2376 贪心

    题意:FJ希望它的牛做一些清洁工作.有N只牛和T个时间段,每只牛可以承担一段时间内的工作.FJ希望让最小数量的牛覆盖整个T,求出其数量.若无法覆盖整个T,则输出-1. 分析:首先要注意T表示T个时间段 ...

  7. chromium high cpu usage

    ctrl + esc 列出哪个进程占用了cpu,可以杀掉. --purge-memory-button可以在上边弹出的窗口上显示一个按钮,据说能释放内存.

  8. SpringBoot多数据源配置

    准备环境: jdk1.8 eclipse tomcat8.0 第一步:在配置文件添加如下信息: spring.datasource.primary.url=jdbc:mysql://localhost ...

  9. Amazon.com 美国亚马逊 直邮中国 手把手教程(转)

    什么值得买已经发布2014最新版美亚直邮攻略 海淘攻略:美国亚马逊 直邮服务 手把手教程(2014最新版) ,调整幅度较大,值友们可以移步到新攻略中查看. 相比德国.英国亚马逊,美国亚马逊的大部分商品 ...

  10. 在linux环境下mongodb的安装和启动

    安装 下载mongodb的版本,两点注意 根据业界规则,偶数为稳定版,如1.6.X,奇数为开发版,如1.7.X 32bit的mongodb最大只能存放2G的数据,64bit就没有限制 到官网,选择合适 ...