使用 mvc5 上传图片

Question

我无法将图像从网站上传到服务器。

我的 ajax 表单正在获取除图像文件之外的所有内容。我在这里看到了类似的问题ASP.Net MVC 5 image upload to folder

但我似乎无法让它工作

我有这个

public HttpPostFileBase imageFile {get;set;}
public string imageText {get;set;}
public string imageTitle {get;set;}
public bool isActive {get;set;}
public DateTime dateAdded {get;set;}
public string urlRedirect {get;set;}

public ActionView Index()
{
   return View;
}

public void UploadImage (CarouselController carouselImage)
{
 // some code
}

我的 ajax begin 表单包含所有带有 html razor 的字段。

@Html.TextBoxFor(model =>model.imageText , new {class = "form-control"} )
... similar for the other fields. 
for the image i have 

@html.TextBoxFor(model => model.imageFile), new { type="file"})

这使它成为一个有效的选择输入框，但它不会将任何信息传递给上传方法。

我的意思见附图。

Answer 1

您需要在表单上设置以下属性：

enctype = "multipart/form-data"

Answer 2

您似乎正在尝试发送文件以及使用 AJAX 发布的表单。如果是这种情况，那么这就是您的问题：您不能以这种方式发送文件。 AJAX 表单发布仅支持纯文本值。如需解决方法，请参阅我对this 问题的回答。

如果您需要任何说明，请告诉我。

Answer 3

public class ImageUpload
{
        public int ID { get; set; }       

        public string Title { get; set; }

        public string Description { get; set; }       

        [AllowHtml]       
        public string Contents { get; set; }

        public byte[] Image { get; set; }
}

public ActionResult Create()
{
     return View();
}

@using (Html.BeginForm("Create","Content", FormMethod.Post, new { enctype ="multipart/form-data" }))
{ 
   <input type="file" name="ImageData" id="ImageData" onchange="fileCheck(this);" />
}

[Route("Create")]
[HttpPost]
public ActionResult Create(ImageUpload model)
{
    HttpPostedFileBase file = Request.Files["ImageData"];

    ContentRepository service = new ContentRepository();

    int i = service.UploadImageInDataBase(file, model);

    if (i == 1)
    {
         return RedirectToAction("Index");
    }

    return View(model);
}

private readonly ImageDBContext db = new ImageDBContext();

public int UploadImageInDataBase(HttpPostedFileBase file, ImageUplad imageupload)
{
        ImageUpload.Image = ConvertToBytes(file);
        var Content = new Content
        {
            Title = imageupload.Title,
            Description = imageupload.Description,
            Contents = imageupload.Contents,
            Image = imageupload.Image
        };

        db.Contents.Add(Content);

        int i = db.SaveChanges();

        if (i == 1)
        {
            return 1;
        }
        else
        {
            return 0;
        }
}

public byte[] ConvertToBytes(HttpPostedFileBase image)
{
    byte[] imageBytes = null;

    BinaryReader reader = new BinaryReader(image.InputStream);

    imageBytes = reader.ReadBytes((int)image.ContentLength);

    return imageBytes;
}

Step 6: Display an image form database on view. Here we display the content and image from the database.

public ActionResult Index()
{
    var content = db.Contents.Select(s => new
    {
        s.ID,
        s.Title,
        s.Image,
        s.Contents,    
        s.Description    
      });

      List<ImageUpload> imageModel = content.Select(item => new ImageUpload()    
      {    
            ID = item.ID,    
            Title = item.Title,    
            Image = item.Image,    
            Description = item.Description,    
            Contents = item.Contents    
        }).ToList();

       return View(imageModel);    
 }

<td>
     <img src="/Content/RetrieveImage/@item.ID" alt="" height=100 width=200 />
</td>

public ActionResult RetrieveImage(int id)
{
    byte[] cover = GetImageFromDataBase(id);

    if (cover != null)
    {
        return File(cover, "image/jpg");
    }
    else
    {
        return null;
    }
}

public byte[] GetImageFromDataBase(int Id)
{
    var q = from temp in db.Contents where temp.ID == Id select temp.Image;

    byte[] cover = q.First();

    return cover;
}

// 这是一个如何上传图像并返回其视图的示例。更多信息请参考https://www.c-sharpcorner.com/UploadFile/b696c4/how-to-upload-and-display-image-in-mvc/