jszip实现检测zip文件的完整性_前端校验压缩包-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_80839643/article/details/134815817

本文介绍了一个使用JavaScript和JSZip库的示例，实现文件选择后对多个ZIP文件进行完整性检查，结果显示每个文件的状态（有效或无效及其错误信息）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
  <title>Batch ZIP Integrity Check</title>
  <script src="jszip.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script> -->
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .results-container {
      margin-top: 20px;
    }

    .result {
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .result.valid {
      color: green;
    }

    .result.invalid {
      color: red;
    }
  </style>
</head>

<body>
  <!-- 文件选择框 -->
  <input type="file" id="zipFilesInput" multiple>
  <!-- 按钮 -->
  <button onclick="checkZipIntegrity()">Check Integrity</button>
  <!-- 结果显示区域 -->
  <div id="results" class="results-container"></div>

  <script>
    function checkZipIntegrity() {
      // 清除上一次检查结果
      const resultsDiv = document.getElementById('results');
      resultsDiv.innerHTML = '';

      // 获取文件选择框的输入
      const filesInput = document.getElementById('zipFilesInput');
      const zipFiles = filesInput.files;

      for (let i = 0; i < zipFiles.length; i++) {
        const zipFile = zipFiles[i];
        const reader = new FileReader();

        // 当读取完成时执行的回调函数
        reader.onload = function (e) {
          // 获取读取的zip文件数据
          const zipData = e.target.result;

          // 使用JSZip库解析zip文件
          JSZip.loadAsync(zipData).then(zip => {
            // 如果zip文件是有效的
            const fileName = zipFile.name;
            const result = document.createElement('p');
            result.textContent = `${fileName} is valid`;
            result.classList.add('result', 'valid');
            resultsDiv.appendChild(result);
          }).catch(error => {
            // 如果zip文件无效
            const fileName = zipFile.name;
            const result = document.createElement('p');
            result.textContent = `${fileName} is invalid: ${error.message}`;
            result.classList.add('result', 'invalid');
            resultsDiv.appendChild(result);
          });
        };

        // 读取zip文件内容
        reader.readAsArrayBuffer(zipFile);
      }
    }
  </script>
</body>

</html>