发布到 MVC 控制器的文件为空

Question

我想向我的 MVC 控制器发布三件事：一个图像和两个字符串。

在视图上，我有一个使用enctype="multipart/form-data" 的表单，它会在选择图像文件后自动提交表单。这是此表单的提交处理程序：

    $("#PhotoUploadForm").on("submit", function (event) {
        event.preventDefault();

        var ImageData = $("#PhotoUploadFileInput").val();
        var GuestNumber = $("#GuestID").val();
        var TCSA_ID = vm.GetSelectedTreatmentAreaTCSA_ID(vm.Photographs.SelectedTreatmentArea());

        var dto = {
            ImageData: ImageData,
            GuestNumber: GuestNumber,
            TCSA_ID: TCSA_ID
        }

        $.ajax({
            url: 'SaveImage',
            type: "POST",
            contentType: "multipart/form-data",
            data: ko.toJSON(dto),
            success: function (data) {
                console.log(submitted);
            }
        });
    });

dto 对象在我的 Model 中定义：

public class PhotoUploadDTO
{
    public HttpPostedFileBase ImageData { get; set; }
    public string GuestNumber { get; set; }
    public string TCSA_ID { get; set; }
}

在我的 Controller 中，我有一个以 dto 为参数的操作：

   public ActionResult SaveImage(PhotoUploadDTO dto)
   {
     //etc.
   }

当我尝试发布 dto 时，所有内容都被发布为 null。这对我来说有问题，因为我希望能够同时将图像和两个字符串发布到控制器。

我怀疑问题出在var ImageData（在我的视图上设置为<input type="file" id="PhotoUploadFileInput"> 的值），并且它被发布为C:/fakepath/etc.，但不是作为实际图像文件。这很令人沮丧，因为我知道如果我有一个刚刚发布图像的表单，这甚至不会成为问题，但是我需要使用这个提交处理程序，而我没有'不知道如何将实际的图像数据带入其中。

为什么数据在到达 MVC 控制器时是 null，我怎样才能在发布这三个项目的同时仍然能够使用提交处理程序？

Answer 1

通过 ajax 上传文件是一件棘手的事情。一些最现代的 Web 浏览器通过使用 File API 来处理这个问题，这确实适用于通过 ajax 上传文件。但是，使用此解决方案不适用于使用旧版浏览器的人。

最好的办法是使用 jquery 插件或类似的东西，这些插件将依赖于通过 iframe 上传文件等技术或其他变通方法。