ASP.NET MVC Jquery가 업로드 할 이미지 보내기

저는 모두 여러분, 음식에 관한 MVC5에 관한 프로젝트를 진행 중입니다. 사용자가 음식을 제출할 수있는 페이지를 만들고 싶습니다.ASP.NET MVC Jquery가 업로드 할 이미지 보내기

namespace WeLoveFOODs.Models 
{ 
    public class MyFood 
    { 
     public string name { get; set; } 
     public string descriptions { get; set; } 
     public string image { get; set; } 
    } 
}

그럼 내가 그들의 음식을 제출하는 사용자에 대한 양식을 가지고 :

나는 클래스 호출되어의 MyFood이

@model WeLoveFOODs.Models.MyFood 
@{ 
    ViewBag.Title = "My Food"; 
} 

<h2>Submit My Food</h2> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.name) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.name) 
       @Html.ValidationMessageFor(model => model.name) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.descriptions) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.descriptions) 
       @Html.ValidationMessageFor(model => model.descriptions) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.image) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.image) 
       @Html.ValidationMessageFor(model => model.image) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Submit" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
}

가 지금은 이미지의 입력 상자 옆에있는 버튼을 원하는을 때 I 클릭하면 양식이 file chooser (또는 무언가)와 함께 표시되고 버튼이 표시됩니다. 이름이 some_random_string.jpg 변경으로 IMG가 업로드 될에

이

public string UpLoadImage(HttpPostedFileBase SelectedImg) 
{ 
    string Path = '~/Upload/'; 
    string NewName = randomString() + '.jpg'; 
    //upload Img with new name is NewName to Path 
    return NewName; 
}

~/Upload 폴더로 : 내가 IMG를 선택하고 BTN을 클릭하면 파일이 업로드 액션 (jQuery를 사용하여), 어쩌면 뭔가처럼로 전송됩니다 작업이 새 이름을 반환하면 JQuery function은 some_random_string.jpg 이름을 가져 와서 이미지의 입력 상자에 넣습니다.

$("#btn_upload_img").click(function(){ 
    HttpPostedFileBase img = $('input[type="file"]').val(); 
    var url = "/Food/UpLoadImage"; 
    $.post(url, SelectedImg: img, function(data){ 
     $("#image").val(data); 
    }); 
});

누군가가 나에게 이것에 도와주세요 수 :

내가 좋아하는 JQuery와 기능이 될 것 기대했다? 감사합니다.

출처

2014-09-18 Severus Dark