顯示在MVC 3剃鬚刀

那麼上傳的圖像，顯示上傳到服務器上的圖像時，這個新手做得不對顯示在MVC 3剃鬚刀

public class Person 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 
    public string ImageUrl { get; set; } 
}

控制器（上傳 - 被稱爲[HttpPost]公衆的ActionResult創建）：

public void Upload(Person person) 
{ 
    var image = WebImage.GetImageFromRequest(); 
    var filename = Path.GetFileName(image.FileName); 
    var path = Path.Combine(Server.MapPath("~/App_Data/Uploads/Fotos"), filename); 
    image.Save(path); 
    person.ImageUrl = Url.Content(Path.Combine("~/App_Data/Uploads/Fotos", filename)); 
}

創建視圖：

... 
@using (Html.BeginForm("Create", "Person", FormMethod.Post, new { @encType = "multipart/form-data" })) 
{ 
    ... 
    @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, includeFormTag: false, uploadText: "image") 
    ... 
    <div> 
     <input type="submit" value="Create" /> | 
     @Html.ActionLink("Back", "Index") 
    </div> 
}

到目前爲止，一切都很好，圖像上傳到文件夾和URL保存

現在，我想看到它的詳細信息視圖

詳細視圖：

<div class="display-foto"> 
    <img src="@Url.Content(Server.MapPath(Model.ImageUrl))" alt="IMAGE" />       
</div>

查看生成的代碼，一切似乎是正常的：

<img src="D:\Users\x\Documents\Visual Studio 2010\Projects\CMI_AD\CMI_AD\App_Data\Uploads\Fotos\_nofoto.jpg" alt="IMAGE" />

但事實是，屏幕上出現什麼，除了文本「IMAG E」。

我在做什麼錯？

P.S.我試過沒有Server.MapPath，使用相對地址「〜\ App_Data \ Uploads \ Fotos_nofoto.jpg」，結果是一樣的。

---編輯---

@ kmcc049：我想你的建議創建一個輔助

public static class MyHelpers 
{ 
    public static IHtmlString MyImage(this HtmlHelper htmlHelper, string url) 
    { 
     var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext); 
     var img = new TagBuilder("img"); 
     img.Attributes["alt"] = "[IMAGE]"; 
     img.Attributes["src"] = UrlHelper.GenerateContentUrl(url, htmlHelper.ViewContext.HttpContext); 
     return MvcHtmlString.Create(img.ToString(TagRenderMode.SelfClosing)); 
    } 
}

在查看通話：

@Html.MyImage(Model.ImageUrl)

生成的代碼是

<img alt="[IMAGE]" src="/App_Data/Uploads/Fotos/_nofoto.jpg" />

但是res ULT是一樣的：沒有圖片:(

---解決---

顯然App_Data文件是不是一個好位置來保存上傳的文件，因爲訪問它們會產生錯誤403 - 禁止。我將文件移動到〜/ Uploads/Fotos並且它可以正常工作。

來源

2011-09-06 Joao

img標籤有一個硬盤的URL，而不是HTTP ... –

這不是一個有效的HTTP路徑。這是計算機上文件夾的路徑。

嘗試UrlHelper.GenerateContentUrl()方法代替 http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.generatecontenturl.aspx

來源

2011-09-06 14:24:55 kmcc049

請閱讀---編輯---我的問題 – Joao

另一個嘗試：'@ {var imgPath = UrlHelper.GenerateContentUrl（Model.ImageUrl，this.ViewContext.HttpContext）; } [IMAGE] '相同的結果：[IMAGE] – Joao

上傳的圖像，並且然後顯示它爲任何web應用非常普遍的要求。最近，我被要求允許用戶添加個人資料圖片，稍後將其顯示在他/她的儀表板上。

所以這就是我所做的，希望這對你也有幫助。

剃刀代碼

@using (Html.BeginForm("SaveSettings", "Blog", FormMethod.Post, new {  enctype="multipart/form-data"})) 
{ 
    @Html.TextBoxFor(m => m.BlahBlah) 

    // and more... 

    <input type="file" name="file" id="file" /> 
    <input type="submit" name="submitButton" value="Save" /> 
}

這裏要注意的重要一點是，我們已經增加了一個叫做enctype作爲enctype="multipart/form-data"一個HTML屬性。

接下來，該表單的操作方法。該操作接受兩個輸入參數：

UserModel model：將所有數據輸入到表單中。 HttpPostedFileBase file：這裏是您將您的上傳圖片發佈到的位置。代碼

[HttpPost] 
public ActionResult Index(UserModel model, HttpPostedFileBase file) 
{ 

if (file.ContentLength > 0) { 

// code for saving the image file to a physical location. 
    var fileName = Path.GetFileName(file.FileName); 
    var path = Path.Combine(Server.MapPath("~/Uploads/Profile"), fileName); 
    file.SaveAs(path); 

// prepare a relative path to be stored in the database and used to display later on. 
    path = Url.Content(Path.Combine("~/Uploads/Profile", fileName)); 
// save to db 

    return RedirectToAction("Index"); 

    }

你有時可能還需要上傳多張圖片，太不低於困難是該代碼。使用IEnumerable。

剃刀代碼：

@using (Html.BeginForm("SaveSettings", "Blog", FormMethod.Post, new { enctype="multipart/form-data"})) 
{ 
<input type="file" name="file" id="file" /> <input type="file2" name="file2" id="file2" /> 
<input type="submit" name="submitButton" value="Save" /> 
}

，這裏是你將如何閱讀張貼的文件。

[HttpPost] 
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) { 
    foreach (var file in files) { 

    // iterate through each file here... 
    } 
    return RedirectToAction("Index");

}

現在你已經上傳的圖片，並保存圖片路徑，接下來的任務就是要顯示的圖像。

顯示上傳的圖片

乾杯！

** **參考

http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx

Displaying an uploaded image in MVC 3 Razor

https://stackoverflow.com/a/5248365/1182982

來源

2013-05-15 06:51:33