MVC 3图片上传图片

Question

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

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

现在视图模型代码

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，它处理后形式的方法和具有编码类型设置为“多部分/格式数据”。

然后使用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的从你的上传/ images目录提取所有图片...你可以搜索基于目录一些扩展，然后它会给你一个结果集，你可以迭代.....

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

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这个教程，它可以让你通过这个....

但同样你问更像是实现代码没有任何问题....

Answer 2

的方法我ve遵循的是将文件信息保存在数据库中（或任何适当的）。例如路径，文件名，内容类型，文件大小。 这给你编辑时最灵活（alt文本，标题，描述，与其他对象的关系）。 然后可以根据路径约定来处理下载/查看文件，方法是创建一个ViewImage控制器，该控制器只获取图像ID作为参数。 然后，您可以从文件的路径构建一个url，并且只需设置内容类型。 然后IIS完成剩下的工作。

Answer 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); 
         } 

        } 
       } 
      } 

    } 

希望得到这个帮助。