js 拖拽上传文件及文件夹

通过input点击上传文件夹可以获取到webkitRelativePath

但是拖拽上传获取不到webkitRelativePath

$(".easy-uploader")[0].addEventListener("drop", e => {e.stopPropagation(); // 防止浏览器打开新的标签页（firefox）e.preventDefault(); // 阻止拖放后的浏览器默认行为if (fileType != 'dir') {//方法二,这种方法另辟蹊径,巧妙的运用了forEach函数,经实验可成功获取文件 filesList.forEach.call(e.dataTransfer.files, function (file) {filesList.push(file);}, false);that.node.list = $(".easy-uploader").parent().parent().children(".uploadLists").children(".drogList");that.fileObj = { fileList: filesList, isReady: true };that.node.input = $(".easy-uploader");that.updateFiles();that.configs.onChange && that.configs.onChange(filesList);filesList = [];}else if (fileType == 'dir') {let items = e.dataTransfer.items;for (let i = 0; i <= items.length - 1; i++) {let item = items[i];if (item.kind === "file") {let entry = item.webkitGetAsEntry();getFileFromEntryRecursively(entry,entry.name);that.node.list = $(".easy-uploader").parent().parent().children(".uploadLists").children(".drogList");that.node.input = $(this);   that.fileObj = objFile;if(i==items.length - 1) {                                   that.updateFiles();that.configs.onChange && that.configs.onChange(filesList);filesList = [];}}}function getFileFromEntryRecursively(entry,path) {if (entry.isFile) {entry.file(file => {var obj=file;obj.dir=entry.fullPath;if(obj.dir.indexOf('/')==0) obj.dir=obj.dir.replace('/','');filesList.push(file);objFile.fileList = filesList;objFile.fileList.name = path;objFile.isReady = true;}, e => { console.log(e); });} else {let reader = entry.createReader();reader.readEntries(entries => {entries.forEach(entry => getFileFromEntryRecursively(entry,path));}, e => { console.log(e); });}}}})

js 拖拽上传文件及文件夹相关推荐

拖拽上传及读取文件实现
1.拖拽上传相关事件 2.拖拽上传简单实现 3.拖拽上传完整实现 4.读取文件实现 1.拖拽上传相关事件相关事件: ondragenter 拖着东西进入 ondragleave 拖着东西离开 ond ...
go语言接收html上传的文件,html5原生js拖拽上传（golang版）
package main import ("fmt" "io" "net/http" "os")const( uploa ...
js 拖拽上传文件夹
需求获取拖拽到指定元素上的文件夹中的文件,并需要知道相对地址. 项目地址 https://github.com/156ban/droped-file-and-folder-reader (服务器中运 ...
vue+flask实现视频合成(拖拽上传)
vue+flask实现视频合成效果如下欢迎访问博客代码哈士奇技术聊天交流群 974178910 前端交流群 535620886 vue+flask实现视频合成拖拽上传我们之前一个文章有写过 ...
Dropzone.js实现文件拖拽上传
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...
js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
一.实现效果左侧区域支持选择一个系统中的文件夹,或者将文件夹拖拽到这个区域进行上传,右侧区域可以将文件夹的结构展示为树形结构. 二.代码实现由于需要使用树形插件zTree,这个插件是依赖于jque ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
js实现文件拖拽上传并显示待上传的文件列表
此文章中完整的代码在我的github中:https://github.com/LiuFeng1011/WebTest/tree/master/upload 首先实现html页面的内容: <bod ...
js 监听复制图片拖拽上传文件并填充到markdown编辑器
文章目录效果获取粘贴的文件获取拖拽的文件发送请求生成markdown 语句实现逻辑代码(主要实现) 后端代码效果获取粘贴的文件 const { clipboardData } = e; ...
html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...

js 拖拽上传文件及文件夹

js 拖拽上传文件及文件夹相关推荐

最新文章

热门文章