阅读 1835

前端实现上传文件夹并获取文件夹名称及文件

前言 

最近做项目有个需求是,用户可以直接上传文件夹。这个跟网页版百度网盘上传文件夹功能一样,通过给 input上传标签添加属性webkitdirectory实现文件夹的上传。But,查看相关Web API文档,webkitdirectory属性并不是所有浏览器都支持。只有Google、Edge、Firefox 50及更高版本中可以使用。

实际经过自己测试,Windows环境下,Google、Edge、Firefox 50、360极速、搜狗及更高版本中都可以使用等,IE,360兼容浏览器不可用。具体实现方法如下:

HTML

<input type="file" onchange="selectFolder(event)" webkitdirectory />
复制代码

浏览器效果:

JS

function selectFolder(e) {
	//文件夹里面所有文件        
	var files = e.target.files;        
	//文件夹名称        
	var relativePath = files[0].webkitRelativePath;        
	var folderName = relativePath.split("/")[0];        
	//文件信息转换成FormData结构遍历上传        
	for (var i = 0; i < files.length; i++) {            
		var formData = new FormData();            
		formData.append('file', files[i])                      
		//上传            
		uploadFiles(formData)        
		}    
	}  
复制代码

操作

文章分类
前端
文章标签