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图片上传到文件夹

回答

相关问题