java web 上传文件夹的实现(支持Chrome)

上传文件夹的思路其实就是将文件夹中所有的文件上传到服务器,上传的时候文件名称要从文件夹目录开始截取,以下图中的目录为例,index.html文件应该以news_1/index.html的路径传到服务器,所有文件上传之后,上传到服务器的文件夹路径是从上传的上传的文件路径截取到文件夹结束。下面详细介绍:

Chrome的实现可以通过input标签的webkitdirectory就可以很容易的实现,但是由于ie浏览器不支持input标签的webkitdirectory属性,所以IE浏览器下可以直接通过ActiveX来直接访问和操作本地文件。实现可查看java web 上传文件夹的实现(支持IE)文章,下面介绍Chrome的实现方法:

假设我需要上传的文件夹目录如下,下面的例子会已这个文件夹路径为参考:

1.Chrome实现上传文件夹:

(1)type=‘file’的input标签是传统上传文件的实现方式,在这里只需要加上webkitdirectory属性,就可以选择文件夹了:

<form method="POST" enctype=multipart/form-dat
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在前端生成树形结构,需要使用JavaScript和HTML。 1. 首先,需要使用JavaScript来读取本地文件夹中的文件和子文件夹。可以使用XMLHttpRequest对象发送HTTP GET请求来获取文件夹中的文件和子文件夹列表。可以使用以下代码: ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'file:///path/to/folder/', true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var fileList = xhr.responseText.split('\n'); // fileList是文件和子文件夹列表,可以进一步处理 } }; xhr.send(); ``` 2. 接下来,需要使用JavaScript和HTML来生成树形结构。可以使用ul和li标签来创建树形结构。可以使用以下代码: ``` function createTree(node, fileList) { var ul = document.createElement('ul'); for (var i = 0; i < fileList.length; i++) { var li = document.createElement('li'); var file = fileList[i]; var a = document.createElement('a'); a.innerHTML = file; a.href = 'file:///path/to/folder/' + file; li.appendChild(a); if (file.endsWith('/')) { createTree(li, readDir('file:///path/to/folder/' + file)); } ul.appendChild(li); } node.appendChild(ul); } createTree(document.body, readDir('file:///path/to/folder/')); ``` 这段代码将在body元素中创建一个树形结构,其中readDir函数用于读取文件夹中的文件和子文件夹列表,createTree函数用于创建树形结构。如果文件名以斜杠结尾,则表示它是一个子文件夹,需要递归读取它的文件和子文件夹列表并创建一个新的ul元素。 注意:由于安全原因,浏览器不允许JavaScript通过XMLHttpRequest对象直接访问本地文件系统。因此,需要在本地web服务器上运行该代码,或者使用chrome --allow-file-access-from-files命令行参数启动Chrome浏览器来访问本地文件系统。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值