第二篇——控制元件

這一篇將會使用Jquery替代HTML5的上傳控制元件，並增加檔案資訊展示和上傳進度條。

首先我們需要下載JqueryUploadify這一個控制元件包（注2提供下載連結地址），裡面包含以下幾個引用：

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>  
<script src="/js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>  
<script src="/js/jquery.uploadify.v2.1.0.min.js"
 
 type="text/javascript"></script>  
<script src="/js/swfobject.js" type="text/javascript"></script>  
<link href="/css/uploadify.css" rel="stylesheet" type="text/css" /> 

• 1
• 2
• 3
• 4
• 5

在前臺頁面中寫入form表單和相應的按鈕

<form id="form1" runat="server">  
    <div id="fileQueue">         
    </div
 
>  
        <div>  
            <p>  
                <input type="file" name="uploadify" id="uploadify"/>  
                <input id="Button1" type="button" value="上傳" onclick="javascript: $('#uploadify').uploadifyUpload()" />  
                <input id="Button2" type="button"
 
 value="取消" onclick="javascript: $('#uploadify').uploadifyClearQueue()" /> 
            </p>  
        </div>  
</form>  

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

然後寫一下uploadify的JS：

<script type="text/javascript">  
       $(document).ready(function () {  

           $("#uploadify").uploadify({  
               'uploader': 'image/uploadify.swf',  //uploadify.swf檔案的相對路徑，該swf檔案是一個帶有文字BROWSE的按鈕，點選後淡出開啟檔案對話方塊                
               'script': 'Handler1.ashx',//    script ：  後臺處理程式的相對路徑  
               'cancelImg': 'image/cancel.png',  
               'buttenText': '請選擇檔案',//瀏覽按鈕的文字，預設值：BROWSE。  
               'sizeLimit':999999999,//檔案大小顯示  
               'floder': 'Uploader',//上傳檔案存放的目錄  
               'queueID': 'fileQueue',//檔案佇列的ID，該ID與存放檔案佇列的div的ID一致  
               'queueSizeLimit': 120,//上傳檔案個數限制  
               'progressData': 'speed',//上傳速度顯示  
               'auto': false,//是否自動上傳  
               'multi': true,//是否多檔案上傳  
               //'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);  

               //    }, 
               'onQueueComplete': function (queueData) {  
                   alert("檔案上傳成功！");                    
                   return;  
               }  

           });  
       });  
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

最後後臺程式和我們第一篇使用的後臺處理是同一程式，下面是圖片展示區：

如果報錯或者超出檔案上傳限制將會用下面的方式提示使用者

CSS樣式區：

<style>
    #drop_zone {
      border: 2px dashed #BBB;
      padding: 25px 5px;
      text-align: center;
      font-size: 20pt;
      color: #BBB;
      border-radius: 5px;
    }
    #drop_zone.hovering {
      -webkit-box-shadow: inset 0px 0px 50px #BBB;
      -moz-box-shadow: inset 0px 0px 50px #BBB;
      -o-box-shadow: inset 0px 0px 50px #BBB;
      box-shadow: inset 0px 0px 50px #BBB;
    }
    .example {
      margin: 40px 25px;
      padding: 10px;
      border: 1px solid #BBB;
    }
    #description:first-line {
      margin-left: 42px;
    }
    #output_area {
      text-align: left;
    }
    #output_area li {
      margin: 10px 0;
    }
  </style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

注1：運用dataTransfer物件，不僅僅能傳輸資料，還能通過dataTransfer物件確定被拖拽的元素以及作為放置目標的元素能夠接收什麼操作。

其中，通過dropEffect屬性可以知道被拖動的元素能夠執行哪種行為。這個屬性的四個值如下：

none：不能把拖動的元素放在這裡。這是除了文字框之外所有元素預設的值。

move：把拖動的元素移動到放置目標。

copy：把拖動的元素複製到放置目標。

link：放置目標會開啟拖動的元素(但拖動的元素必須是個連結，有URL地址)。

把元素拖動到放置目標上的時候，以上每一個值都會導致游標顯示為不同的符號。