ASP.NET MVC 使用Ajax Post 檔案到Controller

ASP.NET MVC 使用Ajax Post 檔案到Controller

HTML CODE:

<form id="myForm">
    <!-- 資料列1 -->
    <input type="text" name="formDataList[0].Field1" value="Value1A" /> <!-- 為了讓Controller接值可以對應, 一定要相同參數名稱[formDataList]及流水號, 且流水號一定要由0開始 -->
    <input type="text" name="formDataList[0].Field2" value="Value1B" />
    <input type="file" name="formDataList[0].File" />

    <!-- 資料列2 -->
    <input type="text" name="formDataList[1].Field1" value="Value2A" />
    <input type="text" name="formDataList[1].Field2" value="Value2B" />
    <!-- 沒有檔案 -->

    <!-- 資料列3 -->
    <input type="text" name="formDataList[2].Field1" value="Value3A" />
    <input type="text" name="formDataList[2].Field2" value="Value3B" />
    <input type="file" name="formDataList[2].File" />

    <button type="button" onclick="submitForm()">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    function submitForm() {
        var formData = new FormData($('#myForm')[0]);
        //這裡可以額外加其他資料
        formData.append('A001', 'A001');
        $.ajax({
            url: '/YourController/YourAction',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                // 處理成功的回應
            },
            error: function (error) {
                // 處理錯誤
            }
        });
    }
</script>

Controller:

public class YourFormDataModel
{
    public string Field1 { get; set; }
    public string Field2 { get; set; }
    public HttpPostedFileBase File { get; set; }
}

[HttpPost]
public ActionResult YourAction(List<YourFormDataModel> formDataList, string A001)
{
    try
    {
        // formDataList 包含多筆資料清單，每筆清單有三個欄位

        foreach (var formData in formDataList)
        {
            string value1 = formData.Field1;
            string value2 = formData.Field2;

            // 如果有檔案，處理檔案，例如保存到伺服器上
            if (formData.File != null && formData.File.ContentLength > 0)
            {
                string fileName = Path.GetFileName(formData.File.FileName);
                string filePath = "/YourUploadDirectory/" + fileName;
                formData.File.SaveAs(Server.MapPath(filePath));

                // 在這裡可以根據需要處理檔案或儲存檔案路徑到數據庫
            }
            
            // 在這裡處理其他表單元素的邏輯，例如儲存到數據庫
        }

        // 其他邏輯...

        return Json(new { success = true, message = "資料處理成功" });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = "資料處理失敗：" + ex.Message });
    }
}

若Form裡除了明細資料外, 還有其他個別欄位值, 也可以透過request.form["object-name"]取得內容。