如何用JavaScript实现图片画廊选中图片批量打包为Zip下载

嘿，你已经搞定了复选框显示/隐藏的功能，接下来咱们来实现批量下载为Zip的功能。前端做这个需要用到两个实用的库：JSZip（用来创建和打包Zip文件）和FileSaver.js（用来触发浏览器的下载动作）。下面一步步来搞定：

步骤1：引入必要的工具库 #

在你的HTML里添加这两个CDN链接（放在其他脚本之前，确保优先加载）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

步骤2：修复现有代码的小问题 #

你原来的Select按钮逻辑里，jQuery选择器少了个点（类选择器需要加.），修改后的代码更简洁：

$("#selectbtn").click(function() {
  var state = $(".custom-checkbox").css("visibility");
  $(".custom-checkbox").css('visibility', state === 'visible' ? 'hidden' : 'visible');
});

步骤3：实现Download按钮的批量下载逻辑 #

添加Download按钮的点击事件处理，核心逻辑是：获取选中的图片URL → 把图片转为Blob → 添加到Zip → 触发下载。完整的JavaScript代码如下：

$(document).ready(function () {
  // 保留你原来的图片预览逻辑
  $('#image-album img').click(function () {
    var link = $(this).attr('src');
    $('#imagepreview').attr('src', link);
    $('#exampleModal').modal('show');
  });

  // 修复后的显示/隐藏复选框逻辑
  $("#selectbtn").click(function() {
    var state = $(".custom-checkbox").css("visibility");
    $(".custom-checkbox").css('visibility', state === 'visible' ? 'hidden' : 'visible');
  });

  // 新增：批量下载为Zip的核心逻辑
  $("#downloadbtn").click(async function() {
    // 获取所有选中的复选框
    const selectedCheckboxes = $(".custom-checkbox:checked");
    if (selectedCheckboxes.length === 0) {
      alert("请先选择要下载的图片！");
      return;
    }

    // 创建一个新的Zip实例
    const zip = new JSZip();

    // 遍历选中的图片，逐个添加到Zip
    for (let i = 0; i < selectedCheckboxes.length; i++) {
      const imgUrl = $(selectedCheckboxes[i]).val();
      // 从URL中提取文件名（自动去除参数部分）
      const fileName = imgUrl.split('?')[0].split('/').pop();

      try {
        // 跨域加载图片并转为Blob（处理外部图片的CORS问题）
        const response = await fetch(imgUrl, { mode: 'cors' });
        const blob = await response.blob();
        // 将图片Blob添加到Zip文件中
        zip.file(fileName, blob);
      } catch (error) {
        console.error(`无法加载图片 ${imgUrl}:`, error);
        alert(`图片 ${fileName} 加载失败，已跳过`);
      }
    }

    // 生成Zip文件并触发浏览器下载
    try {
      const zipContent = await zip.generateAsync({ type: 'blob' });
      saveAs(zipContent, '图片画廊.zip');
    } catch (error) {
      console.error("生成Zip文件失败:", error);
      alert("下载失败，请重试");
    }
  });
});

步骤4：补充模态框代码（修复预览功能） #

你原来的代码里漏了图片预览的模态框，这里补上完整的模态框HTML：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <img id="imagepreview" class="img-fluid" src="" alt="预览图片">
      </div>
    </div>
  </div>
</div>

优化后的CSS（提升界面美观度） #

给图片和复选框加一点间距，让布局更舒服：

#image-album img{
  max-height: 200px;
  max-width: 200px;
  margin: 5px;
}
.custom-checkbox{
  visibility: hidden;
  margin-right: 5px;
}

关键逻辑说明 #

• 跨域处理：因为你用的是Pexels的外部图片，我们在fetch里设置了mode: 'cors'，确保能正常加载跨域资源（Pexels服务器支持CORS）；如果是你自己的图片，需要确保服务器配置了正确的CORS头。
• 文件名提取：通过拆分URL，自动获取图片的原始文件名，避免下载后的文件命名混乱。
• 错误处理：加入了加载失败的提示，避免单个图片加载失败导致整个下载流程中断。

内容的提问来源于stack exchange，提问作者Shrestharikesh