如何使用Ajax实现多文件删除？单文件删除代码改造方法

要把你现有的单文件删除改成支持批量删除，核心是让用户能多选目标文件，再一次性提交删除请求。我给你整理了具体的改造步骤和代码：

1. 先调整HTML结构 #

首先得给每个文件行加个复选框，方便用户选择要删除的文件，再新增一个批量删除的按钮：

<!-- 批量删除按钮，放在文件列表的上方/合适位置 -->
<button id="batch-remove-files" type="button" class="btn btn-danger">批量删除选中文件</button>

<!-- 每个文件行的结构，新增复选框 -->
<div class="file-row">
  <input type="checkbox" class="file-checkbox" fileid="文件ID值">
  <!-- 原来的文件信息、单个删除按钮等内容 -->
  <button class="remove_proposal_file" fileid="文件ID值">单个删除</button>
</div>

2. 修改JavaScript逻辑 #

替换原来的单文件删除代码，改成支持批量删除+保留单个删除的逻辑：

// 保留原有的单个删除逻辑（可选，如果你还需要单个删除功能）
$('.remove_proposal_file').unbind('click').bind('click', function(){
    var file_row_id = $(this).attr('fileid');
    var obj = $(this);
    $.ajax({
        url : '<?=base_url();?>project/remove_proposal_file',
        method: 'POST',
        data: { 
            frow_ids: [file_row_id], // 改成数组格式，和批量删除统一
            action: 'remove_file_supplier', 
            '<?=$csrf['name'];?>': '<?=$csrf['hash'];?>' 
        },
        success: function( data ) {
            var arr = $.parseJSON(data);
            if(arr['status'] == 1 ){
                $(obj).parent().remove();
                $('.file_remove_msg').show();
                setTimeout(function(){ $('.file_remove_msg').hide(); }, 7000);
            }
            click_handler();
        }
    });
});

// 新增批量删除逻辑
$('#batch-remove-files').unbind('click').bind('click', function(){
    // 收集所有选中的文件ID
    var selectedFileIds = [];
    $('.file-checkbox:checked').each(function(){
        selectedFileIds.push($(this).attr('fileid'));
    });

    // 校验是否选中了文件
    if(selectedFileIds.length === 0){
        alert('请先选择要删除的文件');
        return;
    }

    // 批量提交删除请求
    $.ajax({
        url : '<?=base_url();?>project/remove_proposal_file',
        method: 'POST',
        data: { 
            frow_ids: selectedFileIds, // 传数组给后端
            action: 'remove_file_supplier', 
            '<?=$csrf['name'];?>': '<?=$csrf['hash'];?>' 
        },
        success: function( data ) {
            var arr = $.parseJSON(data);
            if(arr['status'] == 1 ){
                // 移除所有选中的文件行
                $('.file-checkbox:checked').closest('.file-row').remove();
                $('.file_remove_msg').show();
                setTimeout(function(){ $('.file_remove_msg').hide(); }, 7000);
            }
            click_handler();
        }
    });
});

3. 后端代码需要配合调整 #

你的PHP后端接口remove_proposal_file需要做一点修改：

• 接收frow_ids数组（而不是原来的单个frow_id）
• 循环遍历数组里的每个ID，执行删除文件记录和物理文件的操作
• 最后返回统一的成功状态

比如后端大概可以这么改：

$selectedIds = $this->input->post('frow_ids');
if(is_array($selectedIds) && !empty($selectedIds)){
    foreach($selectedIds as $fileId){
        // 执行删除逻辑：比如删除数据库记录、删除服务器上的物理文件
        $this->db->where('id', $fileId)->delete('proposal_files');
        // 这里还要加上删除物理文件的代码，比如unlink()
    }
    echo json_encode(['status' => 1]);
}else{
    echo json_encode(['status' => 0, 'msg' => '没有选中要删除的文件']);
}

关键改动点说明 #

• 把单个文件ID改成数组格式传递，统一单删和批量删除的接口参数，减少后端逻辑分支
• 新增复选框收集选中的文件ID，批量提交请求
• 成功后批量移除对应的DOM元素，提升用户体验

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