文件上傳利器JQuery上傳插件Uploadify

時間  2019-11-30
標籤 文件 上傳 利器 jquery 插件 uploadify 欄目 JQuery 简体版
原文   原文鏈接

在作平常項目中，常常在後臺須要上傳圖片等資源文件，以前使用過幾回這個組件，感受很是好用 ，可是每次使用的時候都是須要通過一番查閱，因此還不如記住在這裏，之後使用的時候就翻翻。javascript

他的官方網站以下：http://www.uploadify.com/php

插件下載地址：http://www.uploadify.com/downloadcss

說明文檔：http://www.uploadify.com/documentationhtml

在此以前，先說明下插件使用流程，該插件是基於jQuery的，因此咱們在使用以前須要引用jquery， 那麼能夠想象，插件的做用就在於在前臺將數據提交到後臺，讓咱們經過後臺代碼來保存前臺傳入的文件。因此對於好比說圖片的保存、加水印、等比例壓縮就不屬於此範疇了，不過我打算一塊兒記錄下。java

首先按下面的步驟來實現一個簡單的上傳功能。jquery

1 建立Web項目，命名爲JQueryUploadDemo，從官網上下載最新的版本解壓後添加到項目中。數據庫

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

3 在項目中添加UploadFile文件夾，用來存放上傳的文件。服務器

根據下引用的路徑，應該能知道具體的結構圖是怎麼樣的。異步

4 Default.aspx的html頁的代碼修改以下,該文件能夠認爲是一個公共的圖片上傳頁面，到時經過使用iframe嵌入到須要用到上傳的頁面中就行：

<!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>
    <title>批量上傳</title>
    <link rel="Stylesheet" href="css/uploadify.css" />
    <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="Scripts/swfobject.js"></script>
    <script type="text/javascript">
        $(function () {
            var space = "<%=space %>";
            $('#custom_file_upload').uploadify({
                'uploader': 'Scripts/uploadify.swf',
                'script': 'ashx/Upload.ashx',
                'scriptData': {
                   "type":"<%=type %>"},
                'cancelImg': 'images/uploadify-cancel.png',
                'folder': '/Upload',
                'multi': <%=multi %>,
                'auto': false,
                'fileExt': '*.jpg;*jpeg;*.gif;*.png;*.mp4',
                'fileDesc': '圖片文件 (.JPG, .JPEG, .GIF, .PNG)',
                'queueID': 'custom-queue',
                'queueSizeLimit': 10,
                'simUploadLimit': 10,
                'buttonText': '選擇文件',
                //'buttonImg': '/Scripts/uploadify-cancel.png',
                'removeCompleted': true,
                'onSelectOnce': function (event, data) {
                    $('#status-message').text(data.filesSelected + ' 個文件加入上傳隊列');
                },
                'onClearQueue': function (event, data) {
                    $('#status-message').text('請選擇要上傳的文件:');
                },
                'onComplete': function (event, queueId, fileObj, response, data) {
                    //alert(response.split('|')[1]); //這裏獲取上傳後的URL路徑，用來在前臺顯示 
                    window.parent.document.getElementById('<%=file_id %>').value += response.split('|')[1] + space;
                },
                'onAllComplete': function (event, data) {
                    $('#status-message').text(data.filesUploaded + ' 個文件已上傳');
                }
            });

            $("#Up").click(function () {
                if ($("#custom-queue").html() == "") {
                    alert("請選擇要上傳的文件");
                }
                else {
                    window.parent.document.getElementById('<%=file_id %>').value = "";
                    $('#custom_file_upload').uploadifyUpload(null, false); //一個一個傳
                    //$('#custom_file_upload').uploadifyUpload(null, true);//同時傳
                }
            });

            $("#Clear").click(function () {
                $('#custom_file_upload').uploadifyClearQueue();
            });

        });
    </script>
    <style type="text/css">
    body{font-size:14px; font-family:微軟雅黑;}
    #custom-demo .uploadifyQueueItem {
      background-color: #FFFFFF;
      border: none;
      border-bottom: 1px solid #E5E5E5;
      font: 11px Verdana, Geneva, sans-serif;
      height: 20px;
      margin-top: 0;
      padding: 10px;
      width: 350px;
    }
    #custom-demo #custom-queue {
      border: 1px solid #E5E5E5;
      margin-bottom: 10px;
      width: 370px;
    }
    #custom-demo object{
        float:left;
    }
    .button{
      float:right;
      width:120px;
      height:30px;
      background-color:#525252;
      color:#fff;
      border:0;
      font-size:14px; font-family:微軟雅黑;
      cursor:pointer;
      margin-right:10px;
      _margin-right:7px;
    }
    
    </style>
</head>
<body>
    <div id="custom-demo" class="demo">
        <div class="demo-box">
            <div id="status-message">請選擇要上傳的文件:</div>
            <div id="custom-queue"></div>
            <input id="custom_file_upload" type="file" name="Filedata" class="button" /> <input type="button" id="Up" name="Up" value="上傳" class="button" /> <input type="button" id="Clear" name="Clear" value="清空" class="button" />
        </div>
    </div>
</body>
</html>


這上面有幾個後臺傳入的參數，分別是 
string file_id = "";//插入路徑ID         
int type = -1;//根據type選擇相應尺寸         
string multi = "";//是否選擇多個圖片        
string space = "";//多個圖片時候間隔符
5  UploadHandler類的ProcessRequest方法代碼以下：
public void ProcessRequest(HttpContext context)
       {
           int type = HRSiteRequest.GetFormInt("type", 0);
           ImgUpUtils up = new ImgUpUtils();
        context.Response.Write(up.uploadPic(context.Request.Files, "FileData", CommonUt.Config.getUploadImgConfig(type)));
       }
上面的ImgUpUtils就是上面提到的一個圖片等比例壓縮的處理類，up.uploadPic(string arg1,string arg2)該方法就是返回圖片存儲後的圖片路徑，
通常而言，數據庫中都是存放圖片路徑的， 在網頁中顯示的時候，經過對圖片的src的拼接，就能夠獲得一個網站的圖片URL。而後經過上面的default.aspx頁面中的js咱們能夠看到，實際上js經過異步上傳後返回的這個url，將它放到了圖片的文本框中， 最後提交數據的時候， 該路徑就被存放到了數據庫中， 具體的就是這麼個思路。那麼看看頁面實際運行的實際圖吧。
 

6 運行後效果以下圖：

image

7.運行完後，填充到文本框中：

image

最後提交整個表單的時候， 圖片的url就被存放到了數據庫中。

8 選擇了兩個文件後，點擊上傳，就能夠看到UploadFile文件夾中會增長這兩個文件。

上面簡單地實現了一個上傳的功能，依靠函數uploadify實現，uploadify函數的參數爲json格式，能夠對json對象的key值的修改來進行自定義的設置，如multi設置爲true或false來控制是否能夠進行多文件上傳，下面就來介紹下這些key值的意思：

uploader ： uploadify.swf 文件的相對路徑，該swf文件是一個帶有文字BROWSE的按鈕，點擊後淡出打開文件對話框，默認值：uploadify.swf。
script ：   後臺處理程序的相對路徑 。默認值：uploadify.php
checkScript ：用來判斷上傳選擇的文件在服務器是否存在的後臺處理程序的相對路徑
fileDataName ：設置一個名字，在服務器處理程序中根據該名字來取上傳文件的數據。默認爲Filedata
method ： 提交方式Post 或Get 默認爲Post
scriptAccess ：flash腳本文件的訪問模式，若是在本地測試設置爲always，默認值：sameDomain
folder ：  上傳文件存放的目錄 。
queueID ： 文件隊列的ID，該ID與存放文件隊列的div的ID一致。
queueSizeLimit ： 當容許多文件生成時，設置選擇文件的個數，默認值：999 。
multi ： 設置爲true時能夠上傳多個文件。
auto ： 設置爲true當選擇文件後就直接上傳了，爲false須要點擊上傳按鈕才上傳 。
fileDesc ： 這個屬性值必須設置fileExt屬性後纔有效，用來設置選擇文件對話框中的提示文本，如設置fileDesc爲「請選擇rar doc pdf文件
fileExt ： 設置能夠選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上傳文件的大小限制 。
simUploadLimit ： 容許同時上傳的個數 默認值：1 。
buttonText ： 瀏覽按鈕的文本，默認值：BROWSE 。
buttonImg ： 瀏覽按鈕的圖片的路徑 。
hideButton ： 設置爲true則隱藏瀏覽按鈕的圖片 。
rollover ： 值爲true和false，設置爲true時當鼠標移到瀏覽按鈕上時有反轉效果。
width ： 設置瀏覽按鈕的寬度 ，默認值：110。
height ： 設置瀏覽按鈕的高度 ，默認值：30。
wmode ： 設置該項爲transparent 可使瀏覽按鈕的flash背景文件透明，而且flash文件會被置爲頁面的最高層。 默認值：opaque 。
cancelImg ：選擇文件到文件隊列中後的每個文件上的關閉按鈕圖標，
上面介紹的key值的value都爲字符串或是布爾類型，比較簡單，接下來要介紹的key值的value爲一個函數，能夠在選擇文件、出錯或其餘一些操做的時候返回一些信息給用戶。
onInit : 作一些初始化的工做。
onSelect ：選擇文件時觸發，該函數有三個參數
event:事件對象。
queueID：文件的惟一標識，由6爲隨機字符組成。
fileObj：選擇的文件對象，有name、size、creationDate、modificationDate、type 5個屬性。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 ：當調用函數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

相關函數介紹

在上面的例子中已經用了uploadifyUpload和uploadifyClearQueue兩個函數，除此以外還有幾個函數：

uploadifySettings：能夠動態修改上面介紹的那些key值，以下面代碼

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

若是上傳按鈕的事件寫成下面這樣，文件將會上傳到uploadifySettings定義的目錄中

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

uploadifyCancel：該函數接受一個queueID做爲參數，能夠取消文件隊列中指定queueID的文件。

$('#uploadify').uploadifyCancel(id);
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程