基于PHP与JS/jQuery的下载管理器实现多选批量下载功能求助

AI 小北

2026-10-2

一、修改PHP图片列表渲染逻辑

找到循环输出图片列表项的代码中，复选框的输出行，修改为以下内容，给每个复选框挂载对应的图片资源信息：

echo '<input class="checkbox" name="downloadfile[]" type="checkbox" data-url="'.$image.'" data-filename="'.basename($image).'" />';

二、替换现有jQuery逻辑

把原有<script>标签内的所有JS代码替换为以下内容，修正多选逻辑、新增批量下载功能：

$(document).ready(function(){
  // 列表点击切换选中状态，排除点击单独下载按钮的场景
  $('.images .list-item').click(function(e){
    if($(e.target).closest('.btn.link').length) return;
    const $checkbox = $(this).find('.checkbox');
    $checkbox.prop('checked', !$checkbox.prop('checked'));
  });

  // 阻止复选框点击事件冒泡，避免触发两次切换
  $('.images .list-item .checkbox').click(function(e){
    e.stopPropagation();
  });

  // 批量下载按钮逻辑
  $('.multiselect .btn.link').click(function(e){
    e.preventDefault();
    const selected = $('.images .checkbox:checked');
    if(!selected.length) {
      alert('请先选择需要下载的图片');
      return;
    }
    // 按顺序触发下载，加间隔避免浏览器拦截
    selected.each(function(index){
      const url = $(this).data('url');
      const name = $(this).data('filename');
      setTimeout(() => {
        const a = document.createElement('a');
        a.href = url;
        a.download = name;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }, index * 150);
    });
  });
});