ASP.NET MVC 3 圖片上傳完整實作 (jQuery + Form)

不依賴外掛，純 jQuery + <form> + <input type="file"> 實作多圖上傳、預覽、刪除、說明輸入、發布流程。

核心流程

1. 點擊上傳區塊觸發隱藏 file 元素開啟選檔對話框。
2. setInterval 檢測檔案選取狀態，選取後自動提交表單至後端 /User/UpLoadPhoto。
3. 後端儲存至暫存資料夾，回傳暫存路徑，前端顯示預覽圖與「正在上傳...」提示。
4. 使用者輸入說明，點擊「發布」呼叫後端移動檔案至正式資料夾並入庫。

UI 交互細節

• 初始僅顯示一個上傳框，完成後顯示下一個，最多四張。
• 有圖片才啟用說明輸入與發布按鈕。
• 刪除圖片後可重新上傳。

關鍵程式碼

HTML 結構含多個 .uploadbox、隱藏 form#ImgForm、input#imgFlie。CSS 控制顯示/隱藏、預覽區、載入動畫。jQuery 處理觸發、輪詢、AJAX 提交、狀態切換。

完整展示從前端交互設計到後端暫存/正式儲存分離的實用上傳模式，適合中小型專案直接採用。