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

本文介绍通过HTML5新增的多个API实现多文件(拖拽)上传,支持上传进度及上传速度显示。

本文示例可以在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;
};