JQuery上傳插件Uploadify使用詳解

時間  2019-11-20
標籤 jquery 上傳 插件 uploadify 使用 詳解 欄目 JQuery 简体版
原文   原文鏈接

    Uploadify是JQuery的一個上傳插件，實現的效果很是不錯，帶進度顯示。不過官方提供的實例時php版本的，本文將詳細介紹Uploadify在Aspnet中的使用，您也能夠點擊下面的連接進行演示或下載。 javascript

<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是封裝好了的，開發人員推薦使用前者。 php

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 。 
 css

Events事件

onInit : 每次初始化一個隊列時觸發,作一些初始化的工做。 html

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

onSelect ：當文件從瀏覽框被添加到隊列中時觸發.選擇文件時觸發，該函數有三個參數 java

  • event:事件對象。
  • queueID：文件的惟一標識，由6爲隨機字符組成。
  • fileObj：選擇的文件對象，有name、size、creationDate、modificationDate、type 5個屬性。

代碼以下：
 jquery

'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
            );

當選擇一個文件後彈出的消息以下圖： ajax

2010-01-05_225323

onSelectOnce ：在單文件或多文件上傳時，選擇文件時觸發。該函數有兩個參數event，data，data對象有如下幾個屬性： 數據庫

  • fileCount：選擇文件的總數。
  • filesSelected：同時選擇文件的個數，若是一次選擇了3個文件該屬性值爲3。
  • filesReplaced：若是文件隊列中已經存在A和B兩個文件，再次選擇文件時又選擇了A和B，該屬性值爲2。
  • allBytesTotal：全部選擇的文件的總大小。

onCancel : 當點擊文件隊列中文件的關閉按鈕或點擊取消上傳時觸發。該函數有event、queueId、fileObj、data四個參數，前三個參數同onSelect 中的三個參數，data對象有兩個屬性fileCount和allBytesTotal。 api

  • 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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程