jQuery 多文件上传

第二篇——控件

这一篇将会使用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地址)。

把元素拖动到放置目标上的时候，以上每一个值都会导致光标显示为不同的符号。

注2：http://www.uploadify.com/documentation/ 官方控件包下载地址