ASP.NET WebUploader 多圖上傳並回傳檔名至主頁面實作

需求場景

主頁面 UpLoadUerInfo.htm 包含公司資訊、聯絡方式、反饋內容等表單欄位，並整合 WebUploader 進行多圖上傳。上傳處理頁面 UpLoad.aspx 需將伺服器重新命名後的檔名回傳給主頁面，以便表單提交時一併存入資料庫。

核心解決方案：跨頁面資料傳遞

方案一：隱藏欄位 + JavaScript 回調（推薦）

1. 主頁面表單內預置隱藏 input：<input type="hidden" id="uploadedFiles" name="uploadedFiles" />
2. WebUploader 設定 server: 'UpLoad.aspx'，並監聽 uploadAccept 事件。
3. UpLoad.aspx 上傳成功後回傳 JSON：{ "success": true, "fileName": "20240101_abc.jpg" }
4. 前端在 uploadAccept 將檔名累加至隱藏欄位（逗號分隔或 JSON 陣列）。
5. 表單提交時，後端解析 Request["uploadedFiles"] 即可取得所有檔名。

方案二：Session 暫存

UpLoad.aspx 將檔名存入 Session["UploadedFiles"]（List），主頁面提交時從 Session 讀取並清空。需注意併發與 Session 過期問題。

方案三：跨頁 PostBack（傳統）

主頁面表單 action="UpLoad.aspx"，上傳完成後 Server.Transfer("UpLoadUerInfo.htm") 攜帶檔名，但會導致頁面重載，用戶體驗較差。

關鍵代碼片段

UpLoad.aspx 回傳 JSON

public void ProcessRequest(HttpContext context) {
  // ... 儲存檔案邏輯 ...
  string newFileName = GenerateNewName(fileExt);
  context.Response.ContentType = "application/json";
  context.Response.Write("{\"success\":true,\"fileName\":\"" + newFileName + "\"}");
}

主頁面 WebUploader 設定

var uploader = WebUploader.create({
  swf: 'Uploader.swf',
  server: 'UpLoad.aspx',
  pick: '#filePicker',
  accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }
});

uploader.on('uploadAccept', function(file, response) {
  if (response.success) {
    var hidden = document.getElementById('uploadedFiles');
    hidden.value += (hidden.value ? ',' : '') + response.fileName;
  }
});

資料庫存儲建議

資料表設計：FeedbackInfo (Id, Company, Contact, Content, ImageNames)，ImageNames 存逗號分隔字串或 JSON 陣列，便於後續查詢與展示。