HTML5 拖拽大批量提交文档的示例编码

拖拽大批量提交文档夹

该组件根据 Vue.js 完成，UI 架构是 elementUI,详细的 demo 详细地址在https://github.com/Msxiaoma/upload-folder. 拖拽提交文档夹(仅仅chrome适用)

1、组件叙述

1. 另外拖拽好几个文档夹
2. 删掉特定文档夹
3. 显示信息当今文档夹的提交进度条
4. 超出5M的文档夹分块提交

实际效果以下：

2、遇到的难题

1. 拖拽载入每一个文档夹下面的文档相对路径
2. 怎样显示信息当今提交的文档夹的进度条
3. 提交文档时跨域携带 cookie
4. 文档夹分块

3、处理全过程

1. 拖拽载入每一个文档夹下面的文档相对路径

在开展拖放实际操作时， DataTransfer 目标用来储存，根据拖放姿势，拖拽到访问器的数据信息。它能够储存1项或多项数据信息、1种或多种多样数据信息种类

// 拖拽文档夹
dropFolders (e) {
  e.stopPropagation()
  e.preventDefault()
  var items = e.dataTransfer.items
  for (var i = 0; i < items.length; i++) {
    var item = items[i].webkitGetAsEntry()
    if (item) {
      this.checkFolders(item)
    }
  }
}

// 分辨是不是为文档夹
checkFolders (item) {
  if (item.isDirectory) {
    this.traverseFileTree(item)
  } else {
    this.$alert('只适用提交文档夹', '提醒', {
      confirmButtonText: '明确'
    })
  }
}

traverseFileTree (item, path, parentDir) {
  path = path || ''
  if (item.isFile) {
    item.file((file) => {
        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. 提交文档夹的进度条

沒有分块的文档：依据文档夹中的文档总数，算出每一个文档占文档夹的百分比，当1个文档提交取得成功时，改动文档夹 process；

分块的文档：算出每一个文档占文档的百分比后，算出每块文档占文档的百分比，每块文档提交取得成功后，改动文档夹的 process.

3. 跨域携带 cookie

当服务器设定回应头

    Access-Control-Allow-Origin:务必特定确立的、与恳求网页页面1致的网站域名，不可以为 *。   Access-Control-Allow-Credentials: true

设定恳求头：

    withCredentials:true

填补：

substring 和 substr 的差别

substr(start [, length ]) 回到1个从特定部位刚开始的特定长度的子标识符串。

start:必选项。所需的子标识符串的起止部位。标识符串中的第1个标识符的数据库索引为 0。
length:可选项。在回到的子标识符串中应包含的标识符个数。

substring 回到坐落于 String 目标中特定部位的子标识符串,回到1个包括从 start 到最终（不包括 end ）的子标识符串的标识符串

start:指明子标识符串的起止部位，该数据库索引从 0 刚开始起算。
end:指明子标识符串的完毕部位，该数据库索引从 0 刚开始起算。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。