使用json在aps上傳圖像mvc

Question

我有一個上傳選定文件到asp mvc4文件夾的功能。鑑於頁面的代碼是

<form id="form1" method="post" enctype="multipart/form-data" action="EmployeeDetails/Upload"> 
<input type='file' id="imgInp" accept="image/jpeg"/> 
    <p> 
     <input type="submit" value="Upload" class="btn"/> 
    </p> 
</form> 

而控制器代碼是

[HttpPost] 
     public ActionResult Upload(HttpPostedFileBase imgInp) 
     { 
      if (imgInp != null && imgInp.ContentLength > 0) 
      { 
       // extract only the fielname 
       var fileName = Path.GetFileName(imgInp.FileName); 
       // store the file inside ~/App_Data/uploads folder 
       var path = Path.Combine(Server.MapPath("~/images/Profile"), fileName); 
       imgInp.SaveAs(path); 
      } 
      return view("Index"); 
     } 

取而代之的是我想從視圖發送圖像控制器JSON。或者有沒有其他方法來上傳圖片而不刷新視圖頁面？

Answer 1

您可以用ajax發送形式...

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

jQuery的

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

控制器

[HttpPost] 
    public JsonResult Index(FormCollection data) 
    { 

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

Answer 2

上傳文件到服務器是很簡單的。我們需要的是一個html表單，其編碼類型設置爲multipart/form-data和一個文件輸入控件。

查看：NewProduct.cshtml

<form method="post" enctype="multipart/form-data"> 
    <fieldset> 
     <legend>New Product</legend> 
    <div> 
       <label>Product Name:</label> 
       @Html.TextBoxFor(x => x.ProductName) 
    </div> 
    <div> 
       <label>Product Image:</label> 
       <input name="photo" id="photo" type="file"> 
    </div> 
    <div> 
       @Html.ValidationSummary() 
    </div> 
    <input type="submit" value="Save" /> 
    </fieldset> 
</form> 

上傳的文件都可以在Request.Files的HttpFileCollectionBase。

控制器：

[HttpPost] 
    public ActionResult NewProduct() 
    { 
     HttpPostedFileBase image = Request.Files["photo"]; 
     if (ModelState.IsValid) 
      { 

       if (image != null && image.ContentLength > 0) 
       { 
        var fileName = Path.GetFileName(image.FileName); 
        string subPath = Server.MapPath("ProductLogo"); 
        bool isExists = System.IO.Directory.Exists(subPath); 
        if (!isExists) 
        System.IO.Directory.CreateDirectory(subPath); 
        var path = Path.Combine(subPath+"\\", fileName); 
        if (System.IO.File.Exists(path)) 
        { 
         var nfile = DateTime.Now.ToString() + "_" + fileName; 
         path = Path.Combine(subPath+"\\", nfile); 

        } 
        file.SaveAs(path); 
        return RedirectToAction("List", "Product"); 
       } 
       else 
       { 
        ModelState.AddModelError("", "Please Select an image"); 
        return View(); 
       } 
      } 
      else 
      {   
      return View(); 
      } 
     }