Mvc 3 图片上传画廊

Question

我使用 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 控制器中，因为这只是一个模拟项目，旨在使其工作。我只添加了一个以 ImageUploadViewModel 作为参数的 ActionResult。

      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 POST请求中获取图像，然后使用自定义的DisplayFor模板（称为ImageViewer）来显示它。

 @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支持上传多个文件，但我找不到如何将其与我的当前解决方案实现。任何帮助都将不胜感激。

- Carl Weis

Answer 1

当您点击上传图像按钮后，系统应该调用使用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);
                        }

                    }
                }
          }

    }

希望这有所帮助。

- Beginner

Answer 2

你所询问的似乎更像是实现而不是查询...

如何显示： 通过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或通过post back来实现删除逻辑，具体取决于你的需求...

Asp.net MVC Views按照这个教程操作，它会帮助你完成这个过程...

但是你所问的更像是实现代码而不是问题...

- Usman Masood

---

问题在于我不确定如何进行实现。 - Carl Weis

我发布这篇文章是为了帮助其他可能需要了解如何使用MVC 3上传文件的人。 - Carl Weis

我已经更新了我的答案，并添加了一些基本教程的链接，这将帮助您创建它。 - Usman Masood

Answer 3

我之前遵循的方法是将文件信息存储在数据库中（或其他适当的地方），例如路径、文件名、内容类型和文件大小。这样您在编辑时就可以得到最大的灵活性（替代文本、标题、描述、与其他对象的关系）。然后可以基于路径约定来处理下载/查看文件，通过创建一个 ViewImage 控制器，它只需获取图像 ID 作为参数即可。然后，您可以从文件路径构建 URL，只需要设置内容类型。IIS 就会做剩下的事情。

- AyKarsi