幸福日记

HTML5实现多文件上传(支持文件拖拽及上传进度与速度)

lyz810

本文示例可以在https://www.lyz810.com/demo/fileUpload/上查看。

一、input的multiple属性
input的file类型中新增了multiple属性，用于选择多个文件：
<input type="file" multiple="multiple" />

二、input的accept属性
accept属性用于限制选择文件的类型，例如accept=”image/*”则只能选择图片，其值为文件的MIME类型，可以由逗号分割多个值，如accept=”image/*,text/plain”。MIME类型可以参考http://www.w3school.com.cn/media/media_mimeref.asp。

注意：此处只是限制打开文件选择框时默认展现的文件类型，用户可以通过更改选择文件类型，选择其他类型的文件，所以应该对文件类型进行校验。

三、progress元素
progress元素为HTML5新增元素，用于显示进度条，默认样式如下： 你的浏览器不支持此标签

元素的max属性为进度条满时的值
给元素设置value属性，即可控制进度条的进度，如设置进度为50%（value=50，max=100）： 你的浏览器不支持此标签

四、拖拽事件
本例中使用的拖拽事件有以下几个：
1.ondragover：当文件出于元素上方时触发
2.ondragout：当文件脱离元素时触发
3.ondrop：当文件在元素上，并且鼠标释放时触发

五、通过Ajax上传文件
本例中，多个文件是通过多个请求上传的。这样上传的好处是，对于每一个文件来说，都可以根据上传结果来判断是否需要重传。
也可以通过一个请求同时上传多个文件，但如果上传过程中出错，那么重传的成本要更高，具体使用哪种方式可以根据自己的实际需要进行选择。
本例中，若服务器返回5xx状态码则认为上传失败，会重新上传失败的文件（如果失败3次则不再尝试重传）。
代码片段如下（截取核心代码，完整代码请进入Demo页面查看）：

function uploadFile(index){
  var formData = new FormData();
    formData.append('file', files[index]);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', './backend.php', true);
    xhr.onreadystatechange = function(){
      if(xhr.readyState === xhr.DONE){
        if(xhr.status >= 200 && xhr.status < 300){ 
          failCount = 0;
          if(files[++index]){ 
            uploadFile(index);
          } 
        } else if(xhr.status >= 500 && xhr.status < 600){ 
           failCount++;
           if(failCount > 3){
             failCount = 0;
             if(files[++index]){
               uploadFile(index);
             }
           }else{
            setTimeout(function(){
              uploadFile(index);
            }, 1000);
          }
        }
      }
    };
    xhr.send(formData);
}

六、上传进度与上传速率查看
XMLHttpRequest对象的upload.onprogress事件可以提供上传进度相关的数据
它的参数中包含了已上传字节数loaded、总字节数total、时间戳timeStamp
通过上传字节数/总字节数可以得出上传进度的百分比
通过两次onprogress事件timeStamp之差可以得出两次的时间差（毫秒），通过两次的loaded值可以得出该时间段内上传的字节数
多个文件上传时，可以算出一个文件占整体的百分比，当前上传的文件索引可以得出已经上传的文件个数，用已上传的文件个数乘上每个文件的占比，就可以得到当前文件上传起始时的整体百分比，加上当前文件上传的百分比*每个文件占用的百分比即可得出整体进度的百分比。
这样就可以大致的算出上传的速率：

var timeStamp = 0,
  loaded = 0,
  start = Date.now();
xhr.upload.onprogress = function(e){
  var curProgress = (e.loaded * 100 / e.total).toFixed(2),
    //index：当前文件索引，files：所有要上传的文件
    totalProgress = index / files.length + curProgress / files.length * .01,
    timeInterval = 0,
    rate = 0;
  if(timeStamp > 0){
    timeInterval = e.timeStamp - timeStamp;
  }else{
    timeInterval = Date.now() - start;
  }
  rate = (e.loaded - loaded) / 1024 / timeInterval * 1000;
  timeStamp = e.timeStamp;
  loaded = e.loaded;
};
退出移动版