克雷斯的.NET小心得

大部分的時候我們寫ajax 的時候 都會把上傳檔案和儲存資料分成兩個API來寫
這樣很方便管理 語法也比較好解決 後端也比較好接
不過終究還是會有資料和檔案一起上傳的需求
這時只能靠JS的FormData物件來替我們處理這件事
一般來說 data 參數我們的contentType都是application/x-www-form-urlencoded
也就是把當我們要上傳包含檔案的FormData 時就要把 processData 這個參數改為False才能上傳檔案

因為有加上資料了 所以我們的contentType的Post檔頭不要有任何東西 所以processData必需調為false
這樣我們才能上傳檔案

@section scripts{
    <script>
        $(function () {
            
            $("#Sumbits").click(function () {
                var data = new FormData();
                data.append("StudentName", $("#StudentName").val());
                data.append("StudnetID", $("#StudnetID").val());
                data.append("StudentImg", $("#StudentImg")[0].files[0]);
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("UpLoadImage")',
                    //mimeType: "multipart/form-data",
                    contentType: false,
                    //cache: false,
                    processData: false,
                    data: data,
                    dataType: 'json',
                    success: function () {
                        alert('成功');
                    },
                    error: function () {
                        alert('失敗');
                    }
 
                })
                return false;
            })
        })
    </script>
}
<h2>UpladForm</h2>
 
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
 
    <div class="form-horizontal">
        <h4>Result</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
            </div>
        </div>
 
        <div class="form-group">
            @Html.LabelFor(model => model.StudnetID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.StudnetID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.StudnetID, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.StudentImg, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" id="StudentImg" name="StudentImg" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <a href="#" id="Sumbits" class="btn btn-default" >Upload</a>
            </div>
        </div>
    </div>
}
 
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

使用FormData物件一個一個的Append進去
之後Data就是一整個的FormData物件
由於還滿常用到的 所以我Po給我自己看一下XD