【问题标题】：Mvc 3 Image Upload GalleryMvc 3 图片上传库
【发布时间】：2011-08-27 00:12:39
【问题描述】：

我已经使用 ASP.NET Mvc 3 和 Microsoft.Web.Helpers NuGet 包 实现了图像文件上传。该实现很简单，因为它允许您浏览文件并将其上传到指定目录。

这是我使用 ASP.NET MVC 3 和 Microsoft.Web.Helpers NuGet 插件的图像上传解决方案。

现在是 ViewModel 代码

 namespace MvcImageUpload.Models {
    public class ImageUploadViewModel {
        [UIHint("UploadedImage")]
        public string ImageUrl { get; set; }
        public string ImageAltText { get; set; }
    }    
}

现在对于控制器，我只是将它放到 Home 控制器中，因为这只是一个让它工作的模拟项目。我刚刚添加了一个ActionResult，它以 ImageUploadViewModel 作为参数。

      public ActionResult Upload(ImageUploadViewModel model) {
        var image = WebImage.GetImageFromRequest();

        if (image != null) {
            if (image.Width > 500) {
                image.Resize(500, ((500 * image.Height) / image.Width));
            }

            var filename = Path.GetFileName(image.FileName);
            image.Save(Path.Combine("../Uploads/Images", filename));
            filename = Path.Combine("~/Uploads/Images", filename);
           
                model.ImageUrl = Url.Content(filename);
                model.ImageAltText = image.FileName.Substring(0, image.FileName.Length - 4);
           
        }

        return View("Index", model);
    }

我的图片上传视图很简单，它有一个 Html.BeginForm，它处理 Post 表单方法，并将编码类型设置为“multipart/form-data”。

然后使用 Microsoft.Web.Helpers.FileUpload 帮助器，我从 HTTP 帖子请求图像，然后使用称为 ImageViewer 的自定义 DisplayFor 模板显示它。

 @model MvcImageUpload.Models.ImageUploadViewModel
    @using Microsoft.Web.Helpers;
    @{
        ViewBag.Title = "Index";
     }

    <h2>Image Uploader</h2>
    @using (Html.BeginForm("Upload", "Home", FormMethod.Post, 
        new { @encType = "multipart/form-data" })) {           
        @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, 
            includeFormTag: false, addText: "Add Files", uploadText: "Upload File") <br />        
                                      
        <input type="submit" name="submit" 
               value="Upload Image" text="Upload Images" 
               style="font-size: .9em;" />
        @Html.DisplayFor(x => x, "ImageViewer")<br />
    }

这是自定义 DisplayTemplate 的样子

    @model MvcImageUpload.Models.ImageUploadViewModel
@if (Model != null) { 
    <h4 style="color:Green;">Upload Success!</h4>           
    <p>
        Alt Text has been set to <strong>@Model.ImageAltText</strong>
    </p>
    <img  style="padding: 20px;" 
        src="@(String.IsNullOrEmpty(Model.ImageUrl) ? "" : Model.ImageUrl)" 
            id="uploadedImage"  alt="@Model.ImageAltText"/>
}

这一切正常，图像成功上传到表单帖子上的 /Uploads/Images/FileName.extension。

我的问题

我现在如何才能拥有另一个视图来显示该目录中的所有图像，分页并能够从视图和目录中选择和删除图像？

我也知道 Microsoft.Web.Helpers.FileUpload，支持上传多个文件，但我无法找到如何使用我当前的解决方案来实现这一点。任何帮助将不胜感激。

【问题讨论】：

标签： asp.net-mvc-3 image-uploading

【解决方案1】：

在我看来，您所问的内容更像是实现而不是任何查询......

显示：通过 DirectoryInfo 从 Uploads/Images 目录中获取所有图像...您可以根据某些扩展名搜索目录，然后它会为您提供一个可以迭代的结果集.....

创建一个视图，将所有记录显示为图像链接，并在控制器中将结果集获取到该视图...。按照您希望它们在您的视图中显示的方式绑定这些记录...

System.IO.DirectoryInfo info = new System.IO.DirectoryInfo("your directory path");
               var filesinfo= info.GetFiles("*.jpg", System.IO.SearchOption.AllDirectories);
               var filenum= filesinfo.GetEnumerator();
               while (filenum.MoveNext())
               {
                   //populate some entity like in your case you have ImageUploadViewModel
               }

您可以使用 Ajax 或通过回发来实现删除逻辑，这取决于您想要的方式......

Asp.net MVC Views 遵循本教程，它将让您完成这个....

但您再次要求的更像是实现代码而不是任何问题......

【讨论】：

问题是我不确定如何实施。
我也发布了这篇文章以帮助其他可能需要知道如何使用 mvc 3 上传文件的人。
我已经更新了我的答案，并添加了一些基本教程的链接，这些教程将帮助您创建这个......

【解决方案2】：

我之前采用的方法是将文件信息保存在数据库中（或任何合适的方法）。例如路径、文件名、内容类型、文件大小。这为您在编辑（替代文本、标题、描述、与其他对象的关系）时提供了最大的灵活性。然后可以根据路径约定处理下载/查看文件，方法是创建一个 ViewImage 控制器，该控制器只获取图像 id 作为参数。然后，您可以从文件的路径构建一个 url，您只需要设置内容类型。然后 IIS 完成其余的工作。

【讨论】：

【解决方案3】：

点击上传图片按钮后，系统会调用使用Request的方法来获取文件。

    [HttpPost]
    public ActionResult Upload()
    {
        if(Request.Files != null && Request.Files.Count > 0)
        {
                for (int i = 0; i < request.Files.Count; i++)
                {
                    var postFile = request.Files[i];
                    if (postFile != null && postFile.ContentLength > 0)
                    {
                        if (postFile.ContentLength < GetMaxRequestLength())  //10MB
                        {
                             var file = new ContractAttachment
                            {
                                Name = Path.GetFileName(postFile.FileName),
                                ContentType = postFile.ContentType,
                                FileLength = postFile.ContentLength,
                                FileData = GetStreamBuffer(postFile)
                            };
                            files.Add(file);
                        }

                    }
                }
          }

    }

希望对您有所帮助。

【讨论】：