ajax MVCで画像をアップロード

Question

画像を画像に含めるときに、データベースに新しいオブジェクトを作成する際に問題が発生します。

マイモデル：

public Dog() 

    { 

    public int Id { get; set; } 
    public string Name { get; set; } 
    public string DogImageUrl { get; set; } 

    } 

私のHTMLコード：

@if (User.Identity.IsAuthenticated) 
    { 
      <h7>New Dog</h7> 
      <input id="dogName" type="text" placeholder="dog name" /> 

       <input type="file" name="file" style="width: 100%;" /> 

       <input id="createNewDog" type="button" value="Go" /> 


      </div> 
     </div> 
    } 

私のAjaxのポストコード： $（ '＃のaddNewDog'）をクリックします（関数（E）{

  var imgToUpload = $("input[name=file]").get(0).files[0]; 
     var data = { 
       "Name": $('#dogName').val(), 
       "DogImageUrl ": "nullForNow", 


      }; 
      var url = "@Url.Action("NewDog", "Home")"; 
      $.ajax({ 
       url: url, 
       data: { model: data, file: Request.File[imgToUpload] }, 
       cache: false, 
       type: "POST", 
       contentType: "multipart/form-data", 
       processData: false, 
       success: function (respone) { 
        alert(respone); 
        location.reload(); 
       }, 
       error: function (reponse) { 
        alert(reponse); 
       } 
      }); 
      e.stopPropagation(); 
     }); 

。

マイコン：

public ActionResult NewDog(Dog model, HttpPostedFileBase file) 
    { 


     using (var contex = new DogContext()) 
     { 
      if (User.Identity.IsAuthenticated) 
      { 

       if (file != null) 
       { 
        try 
        { 
         if (file.ContentType == "image/jpeg") 
         { 
          if (file.ContentLength < 500000) 
          { 
           string pic = System.IO.Path.GetFileName(file.FileName); 
           string path = System.IO.Path.Combine(
                 Server.MapPath("~/Content/GroupImages"), pic); 
           // file is uploaded 
           file.SaveAs(path); 
           model.DogImageUrl = path; 
          } 
         } 
        } 
        catch (Exception ex) 
        { 
         return Content(ex.ToString()); 
        } 
       } 

       contex.Dogs.Add(model); 
       contex.SaveChanges(); 
      } 
     } 

私のimgは常にnullになります。私はインターネット上のすべてを検索し、それを把握しませんでした。 私のデータベースのPATHを自分のイメージに保存するのが目的です。

Answer 1

まず、あなたのモデルを定義

public class DogUpload 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public HttpPostedFileBase Image { get; set; } 
} 

次に、あなたの行動

[HttpPost] 
public ActionResult Upload(DogUpload model) 
{ 
    var image = model.Image; 
    var name = model.Name; 
    var fileName = image.FileName; 

    var path = Server.MapPath("~/Content/GroupImages" + fileName); 
    image.SaveAs(path); 

    // create valid url to dog image 
    // create Dog and save to database 
    var dog = dbContext.Dogs.FirstOrDefault(d => d.Id == model.Id); 
    if (dog == null) 
    { 
     dog = new Dog 
     { 
      Name = model.Name, 
      DogImageUrl = url 
     }; 
     ... 
    } 

    return Json(new { message = "Created", id = dog.Id, name = dog.Name, url = dog.DogImageUrl }); 
} 

あなたのビュー

@using(Html.BeginForm("Upload", "Dog", FormMethod.Post, 
     new { id="dogForm", enctype="multipart/form-data" }) 
{ 
    <input type="file" name="Image" /> 
    <input type="text" name="Name" /> 
    <button type="submit">Submit</button> 
} 

AJAX

$("#dogForm").on("submit", function(e) { 
    e.preventDefault(); 

    var form = $(this); 
    var formData = new FormData(form.get(0)); 

    $.ajax({ 
     url: form.attr("action"), 
     method: form.attr("method"), 
     data: formData, 
     processData: false, 
     contentType: false 
    }) 
    .then(function(result) { 
     console.log(result); 
    }); 
});