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控制器中,因为这只是一个让它工作的模拟项目.我刚添加了一个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,支持上传多个文件,但我找不到如何使用我当前的解决方案实现这一点.任何帮助都会受到很大的影响.

Answer 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遵循本教程，它将让您完成这个......

但你所问的更像是实现代码，没有任何问题......