多文件拖拽上传以及利用Jquery替代HTML5上传控件

最近一直在研究文件上传的各种方法以及使用其他控件去重构HTML5自带的上传控件，这一篇将会总结这段时间研究的文件上传的两种方式，并对这一方面告一段落。

本文将分为两部分介绍并解释文件上传的原理和实现过程，第一篇为多文件拖拽上传，类似于QQ邮箱文件拖拽一样；第二篇为使用Jquery代替HTML5上传控件，比较华丽的为每一个文件显示进度条和显示返回结果。

---

第一篇——拖拽

文件拖拽即把一个或多个文件从电脑桌面选中，拖移至我们的页面上传区，并记录下每一个文件的信息，反馈给后台。

首先是给出一个前台页面，一个form表单，包含它的各种属性，特别是（enctype=”multipart/form-data”） 这个属性是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，form里面的input的值以2进制的方式传到后台，保留完整的传递文件数据，进行后台文件处理的操作.

<form id="upload" action="Handler1.ashx" method="post" enctype="multipart/form-data">
 <div class="example ">
      <div id="drop_zone">将文件拖拽到这里</div>
      <div id="output_area"></div>
      <input type="button" value="拖拽上传" onclick="Upload();" />
  </div>
</form>

接下来会逐步展示并一步步解释完整的JS代码，请准备好瓜子和饮料：

初始化的四个基本参数，不得不说一下强大的FormData，它是XMLHttpRequest里面的一个接口，我们利用FormData对象，可以把所有表单元素的name与value组成一个queryString,提交到后台。之后使用XMLHttpRequest的 send( ) 方法来异步提交表单，与普通的ajax相比，使用FormData的最大优点就是可以异步上传二进制文件。

var fd = new FormData();
var FileIndex = 0;
var output = document.getElementById('output_area');
var dropZone = document.getElementById('drop_zone');

接下来我们就需要构造文件拖拽的过程：1.文件进入，2.文件离开，3. 文件拖拽完成效果，4.文件拖拽到页面后处理方式。

//首先对页面事件做一个判断处理，如果页面中存在并满足下列if条件就触发事件方法。
if ((('draggable' in dropZone) && ('ondragenter' in dropZone)
            && ('ondragleave' in dropZone) && ('ondragover' in dropZone)
            && window.File && window.FileList && window.FileReader)) {

    //文件进入事件
    function handleFileDragEnter(e) {
         //不再派发事件
         e.stopPropagation();
         //取消事件的默认动作
         e.preventDefault();
         //为当前元素添加CSS样式（这里使用到的样式均会在下面展示出来）
         this.classList.add('hovering');
    }

    //文件离开事件
    function handleFileDragLeave(e) {
         e.stopPropagation();
         e.preventDefault();
         //为当前元素移除CSS样式
         this.classList.remove('hovering');
    }

    //文件拖拽完成效果
    function handleFileDragOver(e) {
         e.stopPropagation();
         e.preventDefault();
         //把拖动的元素复制到放置目标（注1会给出dropEffect详细属性）。
         e.dataTransfer.dropEffect = 'copy';
    }

    //文件拖拽到页面后处理方式
    function handleFileDrop(e) {
         e.stopPropagation();
         e.preventDefault();
         //为当前元素移除CSS样式
         this.classList.remove('hovering');

        //target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
         var files = e.target.files || e.dataTransfer.files;
         for (var i = 0, f; f = files[i]; i++) {
             FileIndex++;
             //FormData提供的append方法把数据写入到fd中
             fd.append("FileData_" + FileIndex, files[i]);
         }

         var files = e.dataTransfer.files;
         //根据files[]获得的数据，在前台页面写出上传的文件基本信息
         var outputStr = [];
         for (var i = 0, f; f = files[i]; i++) {
             var lastModified = f.lastModifiedDate;
             var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString()
                                                : 'n/a';
             outputStr += '<li><strong>' + f.name + '</strong></li>';
         }
         output.innerHTML = '<ul>' + outputStr + '</ul>';
    }

//为四种方法生成addEventListener事件监听器，addEventListener有三个参数：第一个参数表示事件名称；第二个参数表示要接收事件处理的函数；第三个参数为 useCapture（一般来说为false，true会更改响应顺序），
dropZone.addEventListener('dragenter', handleFileDragEnter, false);
dropZone.addEventListener('dragleave', handleFileDragLeave, false);
dropZone.addEventListener('dragover', handleFileDragOver, false);
dropZone.addEventListener('drop', handleFileDrop, false);
}

文件响应事件之后，就要为数据传递到后台做准备了：

function Upload() {
    //创建XMLHttpRequest方法
    var xhr = new XMLHttpRequest();
    //添加事件监听器（同dropZone监听方法）
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    //使用open()和send()建立并发送响应事件
    xhr.open("POST", "Handler1.ashx");
    xhr.send(fd);
}

//显示进度条
function uploadProgress(evt) {
    if (evt.lengthComputable) {
        var percentComplete = Math.round(evt.loaded * 100 / evt.total);
        document.getElementById('progressNumber').style.width = percentComplete + '%';
    }
    else {
        document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
}

//抛出反馈成功结果
function uploadComplete(evt) {
    alert(evt.target.responseText);
}
//抛出异常提示
function uploadFailed(evt) {
    alert("上传文件异常.");
}
//抛出取消提示
function uploadCanceled(evt) {
    alert("取消.");
}

后台程序：接受前台数据并作出处理

if (context.Request.Files != null)
{
    //服务器端文件保存路径  
    string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\file\\";
    //循环对每一个文件作出处理
    foreach (string fileDate in context.Request.Files.AllKeys)
    {
        HttpPostedFile f = context.Request.Files[fileDate];
        if (f != null && f.FileName != "")
        {
            string title = context.Request.Form["title"];
            f.SaveAs(uploadPath + f.FileName);//保存文件  
            context.Response.Write("上传成功");
        }
    }
}

---

第二篇——控件

这一篇将会使用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" /> 

在前台页面中写入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>  

然后写一下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>

最后后台程序和我们第一篇使用的后台处理是同一程序，下面是图片展示区：

如果报错或者超出文件上传限制将会用下面的方式提示用户

---

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：运用dataTransfer对象，不仅仅能传输数据，还能通过dataTransfer对象确定被拖拽的元素以及作为放置目标的元素能够接收什么操作。

其中，通过dropEffect属性可以知道被拖动的元素能够执行哪种行为。这个属性的四个值如下：

none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。

move：把拖动的元素移动到放置目标。

copy：把拖动的元素复制到放置目标。

link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)。

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

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