淘寶風格圖片上傳預覽、刪除、恢復刪除 JS 實現

功能拆解

1. 本地預覽： input[type=file] onchange -> FileReader.readAsDataURL -> 生成 `` 顯示。
2. 刪除 (軟刪除)： 將項目標記為「已刪除」 (CSS 灰蓋/划線/半透明)，數據構造中移入 deletedList，UI 顯示「恢復」按鈕。
3. 恢復： 從 deletedList 移回 activeList，UI 恢復正常狀態。
4. 提交時過濾： 只上傳 activeList 中的文件。

核心數據結構

let fileList = []; // 當前有效文件 {file, previewUrl, id, status: 'active'}
let deletedList = []; // 已刪除文件

function render() {
    // 遍歷 fileList 渲染預覽區
    // 遍歷 deletedList 渲染「已刪除」區 (可摺疊)
}

關鍵交互邏輯

// 刪除
function removeFile(id) {
    const idx = fileList.findIndex(f => f.id === id);
    if (idx > -1) {
        const f = fileList.splice(idx, 1)[0];
        f.status = 'deleted';
        deletedList.push(f);
        render();
    }
}

// 恢復
function restoreFile(id) {
    const idx = deletedList.findIndex(f => f.id === id);
    if (idx > -1) {
        const f = deletedList.splice(idx, 1)[0];
        f.status = 'active';
        fileList.push(f);
        render();
    }
}

// 獲取上傳文件列表
function getUploadFiles() {
    return fileList.map(f => f.file);
}

參考資源

完整 Demo 參考：淘寶圖片上傳組件實現。建議封裝為 Vue/React 組件復用。