html5拖拽文件-HTML5拖放批量上传文件的示例代码

拖放批量上传文件夹

组件基于Vue.js实现，UI框架为elementUI，完整demo地址在拖拽上传文件夹中（仅chrome支持）

1. 组件说明

同时拖放多个文件夹可删除指定文件夹 显示当前文件夹的上传进度条

疗效如下：

2、遇到的问题

拖拽读取各个文件夹下的文件路径如何显示当前上传文件夹的进度条上传文件时跨域携带cookie文件夹碎片

3、解决过程

1.拖拽读取各文件夹下的文件路径

在拖动操作过程中，DataTransfer对象用于保存通过拖动动作拖到浏览器的数据。它可以保存一个或多个数据、一种或多种数据类型

// 拖拽文件夹
dropFolders (e) {
  e.stopPropagation()
  e.preventDefault()
  var items = e.dataTransfer.items
  for (var i = 0; i  {
        let obj = {
          file: file,
          path: path + file.name,
          attr: item.attr
        }
        this.filesList.push(obj)
    })
  } else if (item.isDirectory) {
    var dirReader = item.createReader()
    dirReader.readEntries((entries) => {
      for (let i = 0; i < entries.length; i++) {
        entries[i].attr = item.attr
        this.traverseFileTree(entries[i], path + item.name + '/', temp)
      }
    }, function (e) {
      console.log(e)
    })
  }
}

2.上传文件夹进度条

文件无碎片：根据文件夹中的文件总数，计算每个文件占文件夹的比例，当有文件上传成功时，更改文件夹流程；

碎片文件：计算每个文件与文件的比例后，计算每个文件与文件的比例，每个文件上传成功后html5拖拽文件，更改文件夹的流程。

3、跨域携带cookie

当服务器设置响应头时

Access-Control-Allow-Origin：必须指定一个明确的域名html5拖拽文件，与请求的网页一致，不能是*. 访问控制允许凭据： true

设置请求头：

withCredentials: true

补充：

子字符串和子字符串的区别

substr(start[,length]) 返回从指定位置开始的指定宽度的子字符串。

开始：必需。 所需子字符串的起始位置。 字符串中的第一个字符的索引为 0。

长度：可选。 返回的子字符串中包含的字符数。

substring 返回位于String对象指定位置的子字符串，返回包含从start到end（不包括end）的子字符串的字符串

start：表示子串的起始位置，索引从0开始。

end：表示子串的结束位置，索引从0开始。

以上就是本文的全部内容。 希望对您的学习有所帮助，也希望您多多支持脚本之家。