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

        } 
       } 
      } 

    } 

希望得到這個幫助。