欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AspNet中使用JQuery上傳插件Uploadify詳解

 更新時間:2015年05月20日 10:29:09   投稿:hebedich  
Uploadify是JQuery的一個上傳插件,實現(xiàn)的效果非常不錯,帶進度顯示。不過官方提供的實例時php版本的,本文將詳細介紹Uploadify在Aspnet中的使用

首先按下面的步驟來實現(xiàn)一個簡單的上傳功能。

1 創(chuàng)建Web項目,命名為JQueryUploadDemo,從官網(wǎng)上下載最新的版本解壓后添加到項目中。

2 在項目中添加UploadHandler.ashx文件用來處理文件的上傳。

3 在項目中添加UploadFile文件夾,用來存放上傳的文件。

進行完上面三步后項目的基本結(jié)構(gòu)如下圖:

4 Default.aspx的html頁的代碼修改如下:

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

  <script type="text/javascript">
    $(document).ready(function()
    {
      $("#uploadify").uploadify({
        'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
        'script': 'UploadHandler.ashx',
        'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
        'folder': 'UploadFile',
        'queueID': 'fileQueue',
        'auto': false,
        'multi': true
      });
    }); 
  </script>

</head>
<body>
  <div id="fileQueue"></div>
  <input type="file" name="uploadify" id="uploadify" />
  <p>
   <a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>| 
   <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a>
  </p>
</body>
</html>

5  UploadHandler類的ProcessRequest方法代碼如下:

public void ProcessRequest(HttpContext context)
{
  context.Response.ContentType = "text/plain";  
  context.Response.Charset = "utf-8";  

  HttpPostedFile file = context.Request.Files["Filedata"];  
  string uploadPath = 
    HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; 

  if (file != null) 
  { 
    if (!Directory.Exists(uploadPath)) 
    { 
      Directory.CreateDirectory(uploadPath); 
    }  
    file.SaveAs(uploadPath + file.FileName); 
    //下面這句代碼缺少的話,上傳成功后上傳隊列的顯示不會自動消失
    context.Response.Write("1"); 
  }  
  else 
  {  
    context.Response.Write("0");  
  } 
}

6 運行后效果如下圖:

7 選擇了兩個文件后,點擊上傳,就可以看到UploadFile文件夾中會增加這兩個文件。

上面簡單地實現(xiàn)了一個上傳的功能,依靠函數(shù)uploadify實現(xiàn),uploadify函數(shù)的參數(shù)為json格式,可以對json對象的key值的修改來進行自定義的設(shè)置,如multi設(shè)置為true或false來控制是否可以進行多文件上傳,下面就來介紹下這些key值的意思:

uploader : uploadify.swf 文件的相對路徑,該swf文件是一個帶有文字BROWSE的按鈕,點擊后淡出打開文件對話框,默認值:uploadify.swf。
script :   后臺處理程序的相對路徑 。默認值:uploadify.php
checkScript :用來判斷上傳選擇的文件在服務(wù)器是否存在的后臺處理程序的相對路徑
fileDataName :設(shè)置一個名字,在服務(wù)器處理程序中根據(jù)該名字來取上傳文件的數(shù)據(jù)。默認為Filedata
method : 提交方式Post 或Get 默認為Post
scriptAccess :flash腳本文件的訪問模式,如果在本地測試設(shè)置為always,默認值:sameDomain 
folder :  上傳文件存放的目錄 。
queueID : 文件隊列的ID,該ID與存放文件隊列的div的ID一致。
queueSizeLimit : 當允許多文件生成時,設(shè)置選擇文件的個數(shù),默認值:999 。
multi : 設(shè)置為true時可以上傳多個文件。
auto : 設(shè)置為true當選擇文件后就直接上傳了,為false需要點擊上傳按鈕才上傳 。
fileDesc : 這個屬性值必須設(shè)置fileExt屬性后才有效,用來設(shè)置選擇文件對話框中的提示文本,如設(shè)置fileDesc為“請選擇rar doc pdf文件”,打開文件選擇框效果如下圖:

fileExt : 設(shè)置可以選擇的文件的類型,格式如:'*.doc;*.pdf;*.rar' 。
sizeLimit : 上傳文件的大小限制 。
simUploadLimit : 允許同時上傳的個數(shù) 默認值:1 。
buttonText : 瀏覽按鈕的文本,默認值:BROWSE 。
buttonImg : 瀏覽按鈕的圖片的路徑 。
hideButton : 設(shè)置為true則隱藏瀏覽按鈕的圖片 。
rollover : 值為true和false,設(shè)置為true時當鼠標移到瀏覽按鈕上時有反轉(zhuǎn)效果。
width : 設(shè)置瀏覽按鈕的寬度 ,默認值:110。
height : 設(shè)置瀏覽按鈕的高度 ,默認值:30。
wmode : 設(shè)置該項為transparent 可以使瀏覽按鈕的flash背景文件透明,并且flash文件會被置為頁面的最高層。 默認值:opaque 。
cancelImg :選擇文件到文件隊列中后的每一個文件上的關(guān)閉按鈕圖標,如下圖:

上面介紹的key值的value都為字符串或是布爾類型,比較簡單,接下來要介紹的key值的value為一個函數(shù),可以在選擇文件、出錯或其他一些操作的時候返回一些信息給用戶。

onInit : 做一些初始化的工作。

onSelect :選擇文件時觸發(fā),該函數(shù)有三個參數(shù)

event:事件對象。
queueID:文件的唯一標識,由6為隨機字符組成。
fileObj:選擇的文件對象,有name、size、creationDate、modificationDate、type 5個屬性。
代碼如下:

$(document).ready(function()
{
  $("#uploadify").uploadify({
    'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
    'script': 'UploadHandler.ashx',
    'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
    'folder': 'UploadFile',
    'queueID': 'fileQueue',
    'auto': false,
    'multi': true,
    'onInit':function(){alert("1");},
    'onSelect': function(e, queueId, fileObj)
    {
      alert("唯一標識:" + queueId + "\r\n" +
         "文件名:" + fileObj.name + "\r\n" +
         "文件大?。? + fileObj.size + "\r\n" +
         "創(chuàng)建時間:" + fileObj.creationDate + "\r\n" +
         "最后修改時間:" + fileObj.modificationDate + "\r\n" +
         "文件類型:" + fileObj.type
      );

    }
  });
}); 

當選擇一個文件后彈出的消息如下圖:

onSelectOnce :在單文件或多文件上傳時,選擇文件時觸發(fā)。該函數(shù)有兩個參數(shù)event,data,data對象有以下幾個屬性:

fileCount:選擇文件的總數(shù)。
filesSelected:同時選擇文件的個數(shù),如果一次選擇了3個文件該屬性值為3。
filesReplaced:如果文件隊列中已經(jīng)存在A和B兩個文件,再次選擇文件時又選擇了A和B,該屬性值為2。
allBytesTotal:所有選擇的文件的總大小。
onCancel : 當點擊文件隊列中文件的關(guān)閉按鈕或點擊取消上傳時觸發(fā)。該函數(shù)有event、queueId、fileObj、data四個參數(shù),前三個參數(shù)同onSelect 中的三個參數(shù),data對象有兩個屬性fileCount和allBytesTotal。

fileCount:取消一個文件后,文件隊列中剩余文件的個數(shù)。
allBytesTotal:取消一個文件后,文件隊列中剩余文件的大小。
onClearQueue :當調(diào)用函數(shù)fileUploadClearQueue時觸發(fā)。有event和data兩個參數(shù),同onCancel 中的兩個對應(yīng)參數(shù)。

onQueueFull :當設(shè)置了queueSizeLimit并且選擇的文件個數(shù)超出了queueSizeLimit的值時觸發(fā)。該函數(shù)有兩個參數(shù)event和queueSizeLimit。

onError :當上傳過程中發(fā)生錯誤時觸發(fā)。該函數(shù)有event、queueId、fileObj、errorObj四個參數(shù),其中前三個參數(shù)同上,errorObj對象有type和info兩個屬性。

type:錯誤的類型,有三種‘HTTP', ‘IO', or ‘Security'
info:錯誤的描述
onOpen :點擊上傳時觸發(fā),如果auto設(shè)置為true則是選擇文件時觸發(fā),如果有多個文件上傳則遍歷整個文件隊列。該函數(shù)有event、queueId、fileObj三個參數(shù),參數(shù)的解釋同上。

onProgress :點擊上傳時觸發(fā),如果auto設(shè)置為true則是選擇文件時觸發(fā),如果有多個文件上傳則遍歷整個文件隊列,在onOpen之后觸發(fā)。該函數(shù)有event、queueId、fileObj、data四個參數(shù),前三個參數(shù)的解釋同上。data對象有四個屬性percentage、bytesLoaded、allBytesLoaded、speed:

percentage:當前完成的百分比
bytesLoaded:當前上傳的大小
allBytesLoaded:文件隊列中已經(jīng)上傳完的大小
speed:上傳速率 kb/s
onComplete:文件上傳完成后觸發(fā)。該函數(shù)有四個參數(shù)event、queueId、fileObj、response、data五個參數(shù),前三個參數(shù)同上。response為后臺處理程序返回的值,在上面的例子中為1或0,data有兩個屬性fileCount和speed

fileCount:剩余沒有上傳完成的文件的個數(shù)。
speed:文件上傳的平均速率 kb/s
注:fileObj對象和上面講到的有些不太一樣,onComplete 的fileObj對象有個filePath屬性可以取出上傳文件的路徑。

onAllComplete:文件隊列中所有的文件上傳完成后觸發(fā)。該函數(shù)有event和data兩個參數(shù),data有四個屬性,分別為:

filesUploaded :上傳的所有文件個數(shù)。
errors :出現(xiàn)錯誤的個數(shù)。
allBytesLoaded :所有上傳文件的總大小。
speed :平均上傳速率 kb/s

相關(guān)函數(shù)介紹

在上面的例子中已經(jīng)用了uploadifyUpload和uploadifyClearQueue兩個函數(shù),除此之外還有幾個函數(shù):

uploadifySettings:可以動態(tài)修改上面介紹的那些key值,如下面代碼

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

如果上傳按鈕的事件寫成下面這樣,文件將會上傳到uploadifySettings定義的目錄中

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

uploadifyCancel:該函數(shù)接受一個queueID作為參數(shù),可以取消文件隊列中指定queueID的文件。

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

花了一個晚上,終于寫完了,對JQuery這個上傳插件也基本了解了,希望對大家有所幫助,不對之處還望大家指正。

以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。

相關(guān)文章

  • Jquery Change與bind事件代碼

    Jquery Change與bind事件代碼

    在每一個匹配元素的change事件中綁定一個處理函數(shù)。change事件會在元素失去焦點的時候觸發(fā),也會當其值在獲得焦點后改變時觸發(fā)。
    2011-09-09
  • jQuery/JS監(jiān)聽input輸入框值變化實例

    jQuery/JS監(jiān)聽input輸入框值變化實例

    在本篇文章里小編給大家整理的是一篇關(guān)于jQuery/JS監(jiān)聽input輸入框值變化實例內(nèi)容,需要的朋友們學習下。
    2019-10-10
  • 基于CSS3和jQuery實現(xiàn)跟隨鼠標方位的Hover特效

    基于CSS3和jQuery實現(xiàn)跟隨鼠標方位的Hover特效

    這篇文章主要介紹了基于CSS3和jQuery實現(xiàn)跟隨鼠標方位的Hover特效的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • jQuery中empty()方法用法實例

    jQuery中empty()方法用法實例

    這篇文章主要介紹了jQuery中empty()方法用法,以實例形式分析了empty()方法的功能、定義及將匹配元素中的所有內(nèi)容移除的使用技巧,需要的朋友可以參考下
    2015-01-01
  • jQuery EasyUI開發(fā)技巧總結(jié)

    jQuery EasyUI開發(fā)技巧總結(jié)

    這篇文章主要介紹了jQuery EasyUI開發(fā)技巧總結(jié)的相關(guān)資料,希望通過本文大家能夠掌握EasyUI的開發(fā)技巧,需要的朋友可以參考下
    2017-09-09
  • 百度多文件異步上傳控件webuploader基本用法解析

    百度多文件異步上傳控件webuploader基本用法解析

    這篇文章主要為大家詳細介紹了百度多文件異步上傳控件webuploader基本用法解析
    2016-11-11
  • jquery 多行文本框(textarea)高度變化

    jquery 多行文本框(textarea)高度變化

    這篇文章介紹了多行文本框(textarea)高度變化的操作,有需要的朋友可以參考一下
    2013-07-07
  • showModelDialog彈出文件下載窗口的使用示例

    showModelDialog彈出文件下載窗口的使用示例

    這篇文章主要介紹了showModelDialog彈出文件下載窗口的使用示例,方法很簡單,大家可以直接參考下面的代碼使用
    2013-11-11
  • jQuery版Tab標簽切換

    jQuery版Tab標簽切換

    網(wǎng)上常見的應(yīng)用,用jQuery實現(xiàn)起來比較簡單,只有幾行代碼。
    2011-03-03
  • jQuery get和post 方法傳值注意事項

    jQuery get和post 方法傳值注意事項

    用 jQuery 的都知道,jQuery 的 get 和 post 方法有三個參數(shù):地址,數(shù)據(jù) 和 回調(diào)函數(shù),但我們知道地址也可以跟隨數(shù)據(jù)的(形如:get_data.php?v1=1&v2=2),而且第二個參數(shù)可以省略,即第二個參數(shù)可以直接寫回調(diào)函數(shù),那么數(shù)據(jù)寫在地址后面和寫在 data 參數(shù)里有什么區(qū)別呢?
    2009-11-11

最新評論