Uploadify 上传文件插件详解

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

•官方下载

•官方文档

•官方演示

<title>Uploadify</title>

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

</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定义的目录中

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

<head>

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

<script

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

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

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>

</form>

$(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>

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

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

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

</body>

</html>

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

jquery.uploadify上传文件配置详解(asp.net mvc)
页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
uploadify 上传文件插件
今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...
[Plugin] JQuery.uploadify上传文件插件的使用详解For ASP.NET
URL:http://www.cnblogs.com/xiaopin/archive/2010/01/21/1653523.html 今天下午整理文件上传的例子,感觉收集到的例子都很不人性话,后来找到 ...
jquery uploadify上传文件插件导致浏览器崩溃问题解决方法
自谷歌浏览器更新到(版本39.0.2171.99 )后,访问上传文件界面浏览器就崩溃了,而其他的浏览器不会出现问题. 出现这种问题的原因就是谷歌浏览器缓存问题,但将访问该jsp页面路径添加上时间戳后无 ...
Django session cookie 上传文件、详解
session 在这里先说session 配置URL from django.conf.urls import patterns, include, url from django.contrib i ...
通过`RestTemplate`上传文件(InputStreamResource详解)
通过RestTemplate上传文件 1.上传文件File 碰到一个需求,在代码中通过HTTP方式做一个验证的请求,请求的参数包含了文件类型.想想其实很简单,直接使用定义好的MultiValueMap ...
windows下命令行终端使用rz上传文件参数详解
rz命令: (X) = option applies to XMODEM only (Y) = option applies to YMODEM only (Z) = option applies t ...
express文件上传中间件Multer详解
express文件上传中间件Multer详解转载自:https://www.cnblogs.com/chengdabelief/p/6580874.html Express默认并不处理HTTP请 ...
使用 jquery 的上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的下载和文档地址 ...

随机推荐

（转）JPEG图片数据结构分析- 附Png数据格式详解.doc
一.简述 JPEG是一个压缩标准,又可分为标准JPEG.渐进式JPEG及JPEG2000三种: ①标准JPEG:以24位颜色存储单个光栅图像,是与平台无关的格式,支持最高级别的压缩,不过,这种压 ...
Ms sql将首字母大写
--辅助表 create table a ( a int ) declare @b int begin insert into a values(@b) end; go --表数据 ),id int) ...
js根据className获取元素封装
虽然有了getElementsByClassName,但是ie低版本不支持,所以我们需要单独定义一个getByClass function getByClass(className,parent){ ...
NHibernate系列文章七：NHibernate对象状态
摘要 NHibernate对象持久化 NHibernate对象的三个状态:临时态.持久态.游离态(托管态) NHibernate三状态的相互转化 1. NHibernate对象持久化 NHiberna ...
NRF51822之修改设备名(掉电不保存)
主要代码 /**@brief Function for handling the Application's BLE Stack events. * * @param[in] p_ble_evt Bl ...
Egret 摇一摇功能
一什么是重力感应二什么是陀螺仪三 Egret中的摇一摇是利用什么原理实现的四摇一摇代码一什么是重力感应二什么是陀螺仪三 Egret中的摇一摇是利用什么原理实现的大概是利用手机 ...
Egret和Http请求 (Ajax、XMLHttpRequest、Post、Get)
一 Http请求二 AJax和XMLHttpRequest 三一个Ajax例子四 Egret中的egret.HttpRequest 五 Post和Get区别一 Http请求 Http深入 ...
html text加提示语
<input type="text" id="key" name="key" value=" 请输入关键词" on ...
1-9 TCP/IP参考模型
ISO/OSI参考模型与TCP/IP模型对比一.网络访问层功能:包括IP地址与物理硬件地址的映射以及将IP地址封装成帧. 基于不同类型的网络接口,网路访问层定义了和物理介质的连接网路访问层包含了 ...
js 构造函数
//构造函数 //使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法 //当对象被实例化后,构造函数会立即执行它所包含的任何代码 function myObject(ms ...

Uploadify 上传文件插件详解

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

随机推荐

热门专题