JavaScript怎么压缩目录并上传

介绍

这篇文章给大家分享的是有关JavaScript怎么压缩目录并上传的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

一、浏览器端

<强> 1.1选择目录

在浏览器端,要实现压缩目录并上传的功能,首先我们要先实现选择目录的功能,要实现该功能,我们可以直接使用HTMLInputElement元素的,webkitdirectory属性:

 & lt; input 类型=癴ile", id=皍ploadFile", webkitdirectory /祝辞

当设置了webkitdirectory属性之后,我们就可以选择目录了。当阿宝哥选择了useAxios目录之后,就会显示以下确认框:

 JavaScript怎么压缩目录并上传

点击上传按钮之后,我们就可以获取文件列表。列表中的文件对象上含有一个webkitRelativePath,属性,用于表示当前文件的相对路径。在进行目录压缩的时候,我们就会使用到该属性。

 JavaScript怎么压缩目录并上传

虽然通过webkitdirectory属性可以很容易地实现选择目录的功能,但在实际项目中我们还需要考虑它的兼容性。比如在IE 11,以下的版本就不支持该属性,其它浏览器的兼容性如下图所示:

 JavaScript怎么压缩目录并上传

(图片来源,终止,和终止,https://caniuse.com/?search=webkitdirectory)

<强> 1.2压缩目录

在JavaScript如何在线解压压缩文件吗?null

JavaScript怎么压缩目录并上传