SWFUpload 多檔案上傳：解決檔案大小異常增大問題

專案需求需要實現多檔案上傳功能，團隊選用了 SWFUpload 元件。官方下載地址為 https://swfupload.googlecode.com/，範例檔案為 SWFUpload-Samples v2.1.0.Release.zip。在解壓後的 \SWFUpload Samples v2.1.0\demos\applicationdemo.net 目錄下可找到對應的 ASP.NET 原始碼。

原始範例僅示範如何將縮略圖資訊儲存至 List 集合，並定義了 Thumbnail 類別。為了改善使用者體驗，我修改了部分原始碼流程：先讓編輯選擇圖片，確認無誤後再統一儲存。這樣若選錯檔案，可重新選擇而不必立即上傳。

核心修改點

• 將「選擇檔案」與「上傳儲存」分離為兩個步驟
• 新增預覽區域，顯示已選檔案縮略圖與大小資訊
• 提供「移除」按鈕，支援單個檔案移除或清空列表
• 上傳前進行客戶端檔案大小與類型驗證

關鍵代碼片段

// SWFUpload 設定重點
var swfu = new SWFUpload({
    // ... 基本設定 ...
    file_queue_limit: 10,           // 限制佇列檔案數
    file_size_limit: "10 MB",       // 單檔大小上限
    file_types: "*.jpg;*.png;*.gif", // 允許副檔名
    file_types_description: "圖片檔案",
    
    // 事件處理
    file_queued_handler: onFileQueued,
    file_queue_error_handler: onFileQueueError,
    upload_start_handler: onUploadStart,
    upload_progress_handler: onUploadProgress,
    upload_success_handler: onUploadSuccess,
    upload_complete_handler: onUploadComplete
});

// 檔案加入佇列時建立預覽元素
function onFileQueued(file) {
    var previewHtml = '<div id="preview_' + file.id + '" class="preview-item">'
        + '<img src="' + getThumbnailUrl(file) + '" />'
        + '<span class="filename">' + file.name + '</span>'
        + '<span class="filesize">' + formatFileSize(file.size) + '</span>'
        + '<button onclick="removeFile(\'' + file.id + '\')">移除</button>'
        + '</div>';
    $("#filePreviews").append(previewHtml);
    updateTotalSize();
}

常見問題與解決

檔案大小顯示異常增大：若發現上傳後檔案體積比原檔大，請檢查伺服器端是否重複寫入、編碼轉換導致體積膨脹，或是縮略圖生成邏輯將原圖覆寫。建議在 upload_success_handler 中比對回傳的檔案大小與原始 file.size，並記錄日誌排查。

延伸閱讀

• SWFUpload 官方文件：事件模型與自訂參數傳遞
• ASP.NET 檔案上傳大小限制設定 (web.config maxRequestLength)
• HTML5 File API 替代方案：現代瀏覽器原生支援拖放上傳