JSZip的简单使用

最新推荐文章于 2024-05-14 19:44:36 发布

代码与大美妞

最新推荐文章于 2024-05-14 19:44:36 发布

阅读量5.8k

点赞数 1

分类专栏： jszip的简单使用文章标签： js zip

本文链接：https://blog.csdn.net/naansun/article/details/121421465

版权

jszip的简单使用专栏收录该内容

1 篇文章 1 订阅

订阅专栏

前言

在前端的项目开发中，上传文件是非常常见的需求那么如果我们上传的是压缩包并要对压缩包的内容进行解压、读取并判断我们该怎么做呢？这里简单介绍一下利用jszip解压并对压缩包里的内容进行分析。

一、JSZip是什么？

JSZip就是一个javascript库用来操作.zip文件的工具可以用来压缩解压。

具体使用可参考官方文档：JSZip

二、使用步骤

1.引入库

// jszip的引入 有很多方式  可以使用npm install  下载   也可使用require 引入
// 这里使用原生的引入方式
<script src="../js/jszip/jszip.js"></script>
<script src="../js/jszip/jszip-utils.js"></script>

2.简单使用

代码如下（示例）：这里我上传的是一个zip压缩包且里面有图片利用jszip对压缩包解压并获取图片的大小分辨率等

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body id="body">
  <input type="file" accept=".zip" id="fileImport">  // 简单的一个上传文件   限制上传文件为zip压缩包
  <div id="demo"></div>
   // 引入jszip库
  <script src="../js/jquery-1.8.3.min.js"></script>
  <script src="../js/jszip/jszip.js"></script>
  <script>
  </script>
</body>

</html>

在js中的使用：

$("#fileImport").on('change',function(event) {
   var files = event.target.files;
   for (var i = 0; i< files.length;i++) {
     handleFile(files[i]);
   }
});
function handleFile(fileObj) {
  //  进行解压   获取压缩包里的内容
  JSZip.loadAsync(fileObj).then(function(zip) {
     console.log(zip);
     // zip.files  既压缩包中  包含的有什么文件
     zip.forEach(function(relativePath,zipEntry) {  // zipEntry  就是压缩文件中的文件实例
        console.log(zipEntry);
        zipEntry.async("base64").then(function(res) {
          console.log(res);
          // res  就是将图片转换成base64
          imgLoad('data:image/png;base64,' + res,function(width,height) {
                console.log(width,height);  // 获取图片的宽 * 高
          })
        })
     })
  })
}

function imgLoad (url, callback) {
      var img = new Image();
      img.src = url;
      if (img.complete) {
        callback(img.width, img.height);
      } else {
        img.onload = function () {
          callback(img.width, img.height);
          img.onload = null;
        };
      };
 };

总结

以上就是利用jszip来对zip压缩包进行解压并对压缩包中的图片进行一些数据获取的使用心得~~~大家如果项目也使用了该工具并对此有些疑问欢迎大家在评论中提出~我们可以一些探讨O(∩_∩)O

代码与大美妞

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
5
评论
JSZip的简单使用

前言在前端的项目开发中，上传文件是非常常见的需求那么如果我们上传的是压缩包并要对压缩包的内容进行解压、读取并判断我们该怎么做呢？这里简单介绍一下利用jszip解压并对压缩包里的内容进行分析。一、JSZip是什么？JSZip就是一个javascript库用来操作.zip文件的工具可以用来压缩解压。具体使用可参考官方文档：JSZip二、使用步骤1.引入库// jszip的引入有很多方式可以使用npm install 下载也可使...
复制链接

扫一扫