Отправить изображение из html form в mvc 4 controller

Question

Я пытаюсь отправить имя пользователя, пароль и изображение из формы html5 в контроллер asp.net mvc4. Я могу получить имя логина и пароль в этом контроллере. Как получить изображение и сохранить в базе данных?

HTML form-

<form action="/Home/Index" id="login-form"> 
    <input type="text" name="username"> 
    <input type="password" name="password"> 
    <input type="file" name="photo" accept="image/*;capture=camera"> 
    <button type="submit">Submit</button> 
</form> 

JQuery Ajax submission-

var data = $('#login-form').serialize(); 
var url = $('#login-form').attr('action'); 
$.post(url, data, function (response) { 
//some code here 
} 

контроллер-

[HttpPost] 
public JsonResult Index(FormCollection data) 
{ 
    String userName = data["username"]; 
    String userPassword = data["password"]; 
    //I want to get that picture here 
} 

Просьба предложить.

Answer 1

попробовать это

HTML form-

<form id="login-form"> 
    <input type="text" name="username" id="username"> 
    <input type="password" id="password" name="password"> 
    <input type="file" name="photo" id="files" accept="image/*;capture=camera"> 
    <button type="submit" onclick="submitform()">Submit</button> 
    </form> 

JQuery ajax-

function submitform(){ 
     var postdata = $('#login-form').serialize();   
     var file = document.getElementById('files').files[0]; 
     var username = document.getElementById('username').value; 
     var password = document.getElementById('password').value; 
     var fd = new FormData(); 
     fd.append("files", file); 
     fd.append("username", username); 
     fd.append("password", password); 
     var xhr = new XMLHttpRequest(); 
     xhr.open("POST", "/Home/Index", false); 
     xhr.send(fd); 

    } 

контроллер-

[HttpPost] 
    public JsonResult Index(FormCollection data) 
    { 
     String userName = data["username"]; 
     String userPassword = data["password"]; 

     if (Request.Files["files"] != null) 
     { 
      using (var binaryReader = new BinaryReader(Request.Files["files"].InputStream)) 
      { 
      var Imagefile = binaryReader.ReadBytes(Request.Files["files"].ContentLength);//your image 
      } 
     } 
    } 

вы можете напрямую сохранить двоичные данные в база данных с типом данных-ИЗОБРАЖЕНИЕ ИЛИ ОБОЗНАЧЕНИЕ и для диспетчеризации

string imageBase64 = Convert.ToBase64String(YOUR BINARY IMAGE FROM DB); 
string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64); 
<img src="@imageSrc" width="100" height="100" />