JQuery上传插件Uploadify使用详解

最新推荐文章于 2018-06-20 19:13:48 发布

liu__software

最新推荐文章于 2018-06-20 19:13:48 发布

阅读量1.2k

点赞数

分类专栏： jquery javascript 文章标签： jquery 插件 javascript js web前端

javascript 同时被 2 个专栏收录

148 篇文章 7 订阅

订阅专栏

jquery

22 篇文章 0 订阅

订阅专栏

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值，如下面代码

$('#uploadify').uploadifySettings('folder','JS');

如果上传按钮的事件写成下面这样，文件将会上传到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>

liu__software

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery上传插件Uploadify使用详解

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。官方下载官方文档官方演示html xmlns="http://www.w3.org/1999/xhtml">head runat="server"> title>Up
复制链接

扫一扫