将类型文件中的数据发送到ASP.NET MVC中的控制器

Question

我要发送照片以发布博客！

我在模型中定义了两个属性。 一个用于存储要存储在数据库中的照片名称，另一个用于获取文件并将其保存到服务器（在资源文件夹中）。

这是我的模型代码：

[DataType(DataType.Upload)]
public HttpPostedFileBase File { get; set; }

public string BlogImage { get; set; }

这是我的HTML代码：

<div class="form-group col-sm-8">
                    <label for="BlogImage">Blog Image</label>
                    <input type="file" class="form-control" id="BlogImage">
                </div>

我想使用AJAX将文件发送到服务器。

 var myAdminBlog = {
    BlogImage: $("#BlogImage").val(),
    File: $("#BlogImage").val()
};

$.ajax({
    url: 'AddPostBlog',
    data: JSON.stringify(myAdminBlog),
    type: "POST",
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success: function (data) {
        alert(data);
    },
    error: function (errormessage) {
        alert(errormessage);
    }
});

这是我的Ajax代码。

最后，您可以看到控制器代码。

 public JsonResult AddPostBlog(csAdminBlog myAdminBlog)
    { 
       int UploadMessage = UploadImage(myAdminBlog);
       return Json("Post Sended", JsonRequestBehavior.AllowGet);

    }

我的问题恰恰是我不知道如何从javascript获取文件。

我尝试使用$（“＃BlogImage”）。val（）方法，但失败了。

注意：所有代码都可以正常工作，所有信息都将发送到控制器，只有未发送的项目是“文件”选项

Answer 1

如果不需要使用jQuery，则可以使用document.getElementById(BlogImage).files[0]

这样创建类

Public Class UploadFile
{
[DataType(DataType.Upload)]
public HttpPostedFileBase File { get; set; }

public string BlogImage { get; set; }

}

然后在JavaScript

 var UploadFile= new Object();
 UploadFile.BlogImage = $("#BlogImage").val();
 UploadFile.File = document.getElementById(BlogImage).files[0];

$.ajax({
   url: 'AddPostBlog',
   data: JSON.stringify({uploadFile:UploadFile}),
   type: "POST",
   contentType: "application/json;charset=utf-8",
   dataType: "json",
   success: function (data) {
      alert(data);
   },
   error: function (errormessage) {
      alert(errormessage);
   }

}）;

和在控制器方法

 public JsonResult AddPostBlog(UploadFile uploadFile)
 { 
  //Your Code

}