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


Posted in HTML / CSS onMarch 28, 2018

拖拽批量上传文件夹

该组件基于 Vue.js 实现,UI 框架是 elementUI,完整的 demo 地址在https://github.com/Msxiaoma/upload-folder. 拖拽上传文件夹(仅仅chrome支持)

一、组件描述

  1. 同时拖拽多个文件夹
  2. 删除指定文件夹
  3. 显示当前文件夹的上传进度条
  4. 超过5M的文件夹分片上传

效果如下:

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

二、遇到的问题

  1. 拖拽读取每个文件夹下面的文件路径
  2. 如何显示当前上传的文件夹的进度条
  3. 上传文件时跨域携带 cookie
  4. 文件夹分片

三、解决过程

1. 拖拽读取每个文件夹下面的文件路径

在进行拖放操作时, DataTransfer 对象用来保存,通过拖放动作,拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型

// 拖拽文件夹
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. 上传文件夹的进度条

没有分片的文件:根据文件夹中的文件总数,算出每个文件占文件夹的百分比,当一个文件上传成功时,修改文件夹 process;

分片的文件:算出每个文件占文件的百分比后,算出每块文件占文件的百分比,每块文件上传成功后,修改文件夹的 process.

3. 跨域携带 cookie

当服务器设置响应头

    Access-Control-Allow-Origin:必须指定明确的、与请求网页一致的域名,不能为 *。   Access-Control-Allow-Credentials: true

设置请求头:

    withCredentials:true

补充:

substring 和 substr 的区别

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

start:必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length:可选项。在返回的子字符串中应包括的字符个数。

substring 返回位于 String 对象中指定位置的子字符串,返回一个包含从 start 到最后(不包含 end )的子字符串的字符串

start:指明子字符串的起始位置,该索引从 0 开始起算。
end:指明子字符串的结束位置,该索引从 0 开始起算。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 #HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 #HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 #HTML / CSS
Html5 localStorage入门教程
Apr 26 #HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 #HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 #HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 #HTML / CSS
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php获取后台Job管理的实现代码
2011/06/10 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
学习Vue组件实例
2018/04/28 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Java基础类库面试题
2013/09/04 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
化工专业自荐书
2014/06/16 职场文书
杨善洲电影观后感
2015/06/04 职场文书
2019各种保证书范文
2019/06/24 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python