ASP.Net MVC 5圖片上傳到文件夾

我有了對於我也是利用已在MVC 5.被腳手架出ASP.Net MVC 5圖片上傳到文件夾

我的基本的CRUD操作的客戶端產品頁面非常簡單MVC5應用有一個名爲Cakes.cs的模型，因爲客戶銷售蛋糕。很簡單。下面是該模型的代碼：

using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 

    namespace TastyCakes.Models 
    { 
     public class Cakes 
     { 
      public int CakesID { get; set; } 
      public string Name { get; set; } 
      public string Description { get; set; } 
      public decimal Price { get; set; } 

      public string CakeImage 
      { 
       get { return Name.Replace(" ", string.Empty) + ".jpg"; } 
      } 
     } 
    }

正如你可以看到我使用的計算特性來爲每個蛋糕的圖像名稱。每個蛋糕只需要1張圖片。現在，當我去我的CRUD頁面上編輯一個蛋糕。我想添加一個簡單的圖片上傳來上傳圖片（不需要調整大小或縮略圖）但我想強制計算出的屬性名稱。換句話說，無論用戶如何命名他們的照片，我的上傳代碼都會將其重命名爲任何Cakes.Name（減去任何空格）+「。jpg」並將其保存爲「〜Images/Cakes」。

我只需要上傳到實際的編輯頁面，所以蛋糕已經在這個時候創建。重命名文件所需的所有信息都應該可用，並且可以從編輯頁面輕鬆使用。下面是我的編輯頁面代碼：

編輯頁：

@model TastyCakes.Models.Cakes 

<div class="row"> 
    <div class="large-12 columns"> 
    <hgroup class="title"> 
     <h1>Edit Cakes</h1> 
    </hgroup> 

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

     <div class="form-horizontal"> 
      <hr /> 
      @Html.ValidationSummary(true) 
      @Html.HiddenFor(model => model.CakesID) 

      <div class="medium-12 column"> 
       @Html.LabelFor(model => model.Name) 
       @Html.EditorFor(model => model.Name) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 

      <div class="medium-12 column"> 
       @Html.LabelFor(model => model.Description) 
       @Html.EditorFor(model => model.Description) 
       @Html.ValidationMessageFor(model => model.Description) 
      </div> 

      <div class="medium-12 column"> 
       @Html.LabelFor(model => model.Price) 
       @Html.EditorFor(model => model.Price) 
       @Html.ValidationMessageFor(model => model.Price) 
      </div> 

      <div class="medium-12 column"> 
       <input type="submit" value="Save" class="tiny button" /> 
       @Html.ActionLink("Back to List", "Index", null, new { @class = "tiny button" }) 
      </div> 
     </div> 
    } 

    @section Scripts { 
     @Scripts.Render("~/bundles/jqueryval") 
    } 
    </div> 
</div>

我已經審查了幾個HTML5 & ASP.Net 4解決方案，但這是太多了。我想要的非常簡單。任何想法或一個正確的方向踢會非常感激。我不僅爲客戶網站使用此代碼，而且還將其包含在用於教授非常基本的MVC概念的虛構網站中。

來源

2014-03-25 Eric Bishard

我已經嘗試了代碼在本教程整合，但有麻煩它的工作，還有爲n的指令，只是代碼，所以我可能做錯了什麼或可能需要改變爲mvc5右邊的代碼現在我沒有實現。 http://www.dotnet-tricks.com/Tutorial/mvc/WKNQ120113-How-to-upload-a-file-in-MVC4.html –

尋找解決方案，教程等。 –

結帳我的答案http： //stackoverflow.com/a/40990080/4251431 –

你需要：

添加file類型的input到您的表單，
有你的表單元素上的屬性enctype = "multipart/form-data"

然後添加一個HttpPostedFileBase到模型與input的名稱相同。然後HttpPostedFileModelBinder將在調用動作之前從上傳的文件中填充模型屬性。請注意，我認爲您應該在某處添加模型ID，或許將其作爲路徑元素，以保證圖像路徑中的唯一性，以便圖像不會意外被覆蓋。

有這樣的http://www.prideparrot.com/blog/archive/2012/8/uploading_and_returning_files

public class Cakes 
{ 
    ... 

    public HttpPostedFileBase UploadedFile { get; set; } 

} 

[HttpPost] 
public ActionResult Edit(Cakes cake) // I'd probably use a view model here, not the domain model 
{ 
     if (ModelState.IsValid) 
     { 
      if (cakes.UploadedFile != null) 
      { 
       cakes.UploadedFile.SaveAs(Path.Combine("path-to-images-for-this-cake", cakes.CakeImage)); 
      } 

      .... 
     } 
}

來源

2014-03-25 02:45:53 tvanfosson

你給我的鏈接是完美的。我以前真的在那個網站上，發現它很有信譽。我感謝你在正確的方向上推動ID和額外的ID輸入，使文件獨一無二！當我得到這個工作並在我的教程中實現它時，我會將完成的代碼或教程發佈給運行這個問題的其他人！ –

我也發現這個教程，我也會看看。 http://sampathloku.blogspot.com/2014/02/dropzonejs-with-aspnet-mvc-5.html與其他教程不同，我發現它有一個關於如何使用VS 2013的分步指南。我再次感謝你非常有幫助。 –

只是關於我在上面提供的DropzoneJS鏈接的快速註釋。如果任何人有興趣，他們應該首先通過驕傲鸚鵡教程，因爲DropdownJS教程只是簡單地向您展示如何安裝文件並在控制器中實現，但保存部分保持開放，這是一件好事，但您需要知道你的選擇是什麼以及如何實現它們，而Pride Parrot教程很好地解釋了這個方面。 –

一個相當完整的討論，這是這裏提供的代碼，最終走進了建築這個小演示，可以讓你上傳圖片到文件系統和動態使用它們沒有存儲任何值給數據庫;但是，您將擁有圖像文件位置的字符串作爲Model類的一部分，該類使用上傳文件的約定和命名來顯示。

我想上傳到github，看看我是否無法讓其他人來幫助我找出一個更好的解決方案來使用這個想法。也想讓它與MongoDB一起工作。

ASP.NET MVC 5 Image Upload & Delete w/ Calculated Property

來源

2014-09-17 04:08:32

ASP.Net MVC 5圖片上傳到文件夾

回答

相關問題