MVC 4 Ajax異步文件上傳始終將空值傳遞給控制器

Question

嘗試從ajax異步上傳文件到我的控制器時遇到問題。 我有3個要傳遞的變量（PictureId，PictureName和PictureFile） 。 問題出在我的“ PictureFile”變量上，該變量應該保存上載的文件本身，但始終將空值傳遞給控制器。

這是我的視圖模型

public class PictureUpload
{
    public int PictureId { get; set; }
    public string PictureName { get; set; }
    public HttpPostedFileBase PictureFile { get; set; }
}

這是我的控制器

public JsonResult EditPicture(PictureUpload picture)
{
    //do something here
}

這是我的表格

<div class="thumbnail" id="uploadForm">
    <form name="uploadForm" enctype="multipart/form-data">
        <input type="text" name="fileId" hidden="hidden" />
        <input type="file" name="file" style="max-width: 100%" />
        <input type="button" name="cancel" value="cancel" />
        <span>
            <input type="button" name="upload" value="upload" />
        </span>
    </form>
</div> 

這是我的劇本

$("input[name=upload]").click(function () {
    var $pictureId = $("input[name=fileId]").val();
    var $pictureFile = $("input[name=file]").get(0).files[0];

    $.ajax({
        type: 'POST',
        url: '@Url.Action("EditPicture", "Restaurant")',
        contentType: "application/json",
        dataType: 'json',
        data: JSON.stringify({ PictureId: $pictureId, PictureName: $pictureFile.name, PictureFile: $pictureFile }),
    });

在我的控制器參數中。 “ PictureId”和“ PictureName”保留正確的值，但“ PictureFile”始終為空。 因此，這意味着當系統將參數從ajax傳遞到控制器時，事情會變得不對勁。 系統以某種方式區別對待“文件”類型。 您能否幫助我，以便文件成功傳遞到控制器，並告訴我此方法有什么問題？

Answer 1

如注釋中正確提到的，使用FormData。 下面是一個代碼片段：

var fd = new FormData();
fd.append('file', fileObject);
fd.append('PictureId', pictureId);
fd.append('PictureName', pictureName);

    $.ajax({
        url: '/Restaurant/EditPicture',
        async: true,
        type: 'POST',
        data: fd,
        processData: false,
        contentType: false,
        success: function (response) {                  
        }
    });

Answer 2

您無法使用AJAX上傳文件。 實現此目標的一種方法是使用隱藏的iframe，該iframe將模擬AJAX調用並執行實際的文件上傳或使用Flash。