ASP.Net MVC 5影像上传至文件夹 [英] ASP.Net MVC 5 image upload to folder

问题描述

我有了为我也是利用已在MVC 5.被脚手架了基本的CRUD操作的客户端产品页面非常简单的应用程序MVC5

I have a very simple MVC5 application that has a product page for the client that I also am utilizing the basic CRUD operations that have been scaffolded out in MVC 5.

我有一个名为Cakes.cs模型，因为客户销售蛋糕。 pretty简单。这里是code为该型号：

I have a Model called Cakes.cs because the client sells cakes. Pretty simple. Here is the code for that model:

    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页面的蛋糕。我想补充一个简单的图片上传，将上传的图像（无需调整或缩略图），但我想征收计算的属性名称。换句话说：无论什么用户已经命名他们的照片，我的上传code将其重命名为无论是Cakes.Name（减去任何空格）+JPG，并将其保存为〜图像/蛋糕

As you can see I am using a calculated property to create an image name for each cake. I only need 1 image for each cake. Now when I go to Edit a cake on my CRUD pages. I would like to add a simple Image upload that will upload an image (No need for resizing or thumbnails) But I would like to impose the calculated property name. In other words: no matter what the user has named their photo, my upload code will rename it to whatever the Cakes.Name is (minus any spaces) +".jpg" and save it to "~Images/Cakes".

我只需要上传是实际的编辑页面上，这样的蛋糕，会已在这一点上创建的。所有需要重命名文件应该可用易的信息，从编辑页面使用。下面是我的编辑页面code：

I am only requiring the upload to be on the actual Edit page, so the cake will already have been created at this point. All of the information needed for renaming the file should be available and easy to utilize from the Edit page. Below is my Edit page code:

编辑页：

@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解决方案，但这是太多了。我要的是很简单的。任何意见或在正确的方向踢将非常AP preciated。我用这code不仅对客户的网站，但用来教导非常基本的MVC概念的一个虚构的网站，包括

I have reviewed a few html5 & ASP.Net 4 solutions, but this is too much. What I want is very simple. Any ideas or a kick in the right direction would be very much appreciated. I am using this code not only for a clients website but to include in a fictional website used to teach very basic MVC concepts.

推荐答案

您需要：

• 添加输入类型文件到您的表单，


• 有属性的表单元素上 ENCTYPE =的multipart / form-data的

• add an input of type file to your form,
• have the attribute on your form element enctype = "multipart/form-data"

然后，一个 HttpPostedFileBase 使用相同的名称添加到您的模型作为输入的名称。那么 HttpPostedFileModelBinder 在调用操作之前将上传文件填充模型属性。请注意，我想你应该在模型中的ID可能增加的地方，也许是作为路径元素，以保证唯一性图片的路径，使图像不小心被覆盖。

Then add an HttpPostedFileBase to your model with the same name as the name of the input. Then the HttpPostedFileModelBinder will populate the model property from the uploaded file before the action is invoked. Note, I think you should probably add in the model id somewhere, perhaps as a path element, to guaranteed uniqueness in the image path so that images don't accidentally get overwritten.

有这样一个相当完整的讨论在<一个href=\"http://www.prideparrot.com/blog/archive/2012/8/uploading_and_returning_files\">http://www.prideparrot.com/blog/archive/2012/8/uploading_and_returning_files

There's a reasonably complete discussion of this at 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));
           }

           ....
      }
}

这篇关于ASP.Net MVC 5影像上传至文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！