ajax json 傳文件的坑

ajax json 傳文件的坑

用了好久的json才知道，用Json傳文件時一定不能和普通數據一樣傳輸，要避免data序列化，樣例如下：

<form method="post" onsubmit="return false;" enctype="multipart/form-data">
     <div class="form-group">
         <label for="title">標題</label>
         <input name="title" id="idtitle" type="text" class="form-control">
     </div>
    <div class="form-group">
      <label for="image">上傳圖片</label>
      <input id="file"  type="file" name="image" /><br />
    </div>
    <button 提交</button>
</form>

表單大致是這樣
ajax向後端傳輸數據（包括文件）：

 <script type="text/javascript">
            $(document).ready(function () {
                $("form").submit(function () {
                //用變量存儲控件value
                    var fileObj = $('#file')[0].files[0];
                    var title = $("#idtitle").val();
                  
                    var formFile = new FormData();
                    //加入文件對象，想接口傳入參數key--value(也就是控件ID和值)
                    formFile.append("image", fileObj);
                    formFile.append("title", title);
                   
                    var data = formFile;

                    $.ajax({
                        url: '/Article/PublishArticle',
                        type: 'post',
                        dataType: 'json',
                        cache: false,//上傳文件無需緩存
                        processData: false,//用於對data參數進行序列化處理 這裏必須false，重點不能忘
                        //必須
                        contentType: false, 
                        data: data,
                        success: function (data) {
                           //json返回後操作
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(errorThrown);
                        }
                    });

                });
            });
        </script>

附加：順便在這裏補一下asp.net MVC5 後端保存圖片的方法
~/Uppictures/ 是項目根目錄下的Uppictures文件夾，放上傳的圖片

string imagePath = Request.MapPath("~/Uppictures/" + Request.Files["image"].FileName);
                    Request.Files["image"].SaveAs(imagePath);