前端如何实现拖拽文件夹上传

如果是点击上传文件夹,可以给input添加webkitdirectory属性,但是拖拽上传文件夹,我找遍全网也没找到满意的答案,最接近的一个答案,确实是拿到了数据,这里有demo: https://wicg.github.io/direct...

但是拿不到文件所在路径,也就是webkitRelativePath

图片描述

这个问题困扰很久了,只能求助于社区了。如果是无法实现的话请告知一下,或者有其他方法的,在下不吝赐教。

阅读 11.2k
3 个回答

老问题了。浏览器里的网页拿不到路径,因为浏览器这个东西的设计目标,就是成为一个黑盒,限制这些能直接接触到系统资源的操作,所以要拿路径,要么成为浏览器插件,要么干脆去跑本地(比如node)。

var uploadFile = function(file, path) {
  console.log(file, path)
  printToScreen(path, file)
}

这个 path 就是路径了,通过filesAndDirs[i].path获取的,你翻下他的 js 看看.


补充

你把filesAndDirs输出看看,他是一个树形结构
我本地的路径

/root
│  index.html
│
├─css
│      index.css
│
└─js
        index.js

调试代码

var iterateFilesAndDirs = function(filesAndDirs, path) {
    console.log('filesAndDirs', filesAndDirs)
    ...
}    

输出结果
图片描述

循环filesAndDirs,判断子项是否有getFilesAndDirectories方法,如果有就是目录,然后调用目录的getFilesAndDirectories方法,继续获取子目录下的filesAndDirs一直递归,直到找不到子目录.

通过拼path和文件名获取路径

我也有同样的需求,而且遇到的问题跟你一样,如果只是选择文件夹,给input添加webkitdirectory可以获取到里面的文件相对于文件夹的路径。但是拖拽文件夹的话获取到webkitRelativePath的是空的。请问你后来是怎么解决的呢?百度网盘是可以实现拖拽文件夹上传,保留文件夹结构的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题