Hiển thị một hình ảnh tải lên trong MVC 3 Razor

Question

Vâng, newbie này đang làm gì đó sai khi hiển thị hình ảnh được tải lên máy chủ:

mô hình:

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

điều khiển (tải lên - gọi bởi các [HttpPost] public ActionResult tạo):

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

tạo view:

... 
@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> 
} 

Cho đến nay, như vậy tốt, hình ảnh được tải lên thư mục và url được lưu

Bây giờ, tôi muốn nhìn thấy nó trong chi tiết

chi tiết xem:

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

Xem mã được tạo, mọi thứ có vẻ không sao:

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

Nhưng thực tế là không có gì xuất hiện trên màn hình ngoại trừ văn bản "IMAG E ".

Tôi đang làm gì sai?

P.S. Tôi đã thử mà không có Server.MapPath, sử dụng địa chỉ tương đối "~ \ App_Data \ Uploads \ Fotos_nofoto.jpg" và kết quả là như nhau.

--- EDIT ---

@ kmcc049: Tôi đã cố gắng đề nghị của bạn tạo ra một helper

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

cuộc gọi trong giao diện:

@Html.MyImage(Model.ImageUrl) 

mã được tạo là

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

nhưng lại là ult là như nhau: không có hình ảnh :(

--- SOLVED ---

Rõ ràng App_Data không phải là một vị trí tốt để lưu các tập tin được tải lên bởi vì truy cập vào chúng sẽ dẫn đến một Lỗi 403 - Forbidden. Tôi di chuyển các tập tin đến ~/Uploads/Fotos và nó hoạt động.

Answer 1

Đó không phải là đường dẫn HTTP hợp lệ. Đó là đường dẫn đến thư mục trên máy tính của bạn.

thử UrlHelper.GenerateContentUrl() phương pháp thay http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.generatecontenturl.aspx

Answer 2

tải lên một hình ảnh và sau đó hiển thị nó là một yêu cầu rất phổ biến cho bất kỳ ứng dụng web. Gần đây, tôi được yêu cầu cho phép người dùng thêm ảnh tiểu sử và sau đó hiển thị ảnh đó trên trang tổng quan của anh ấy/cô ấy.

Vì vậy, đây là những gì tôi đã làm, hy vọng điều này sẽ giúp bạn quá.

Razor Mã

@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" /> 
} 

Điều quan trọng cần lưu ý ở đây là chúng tôi đã thêm một tài sản html gọi enctype như enctype="multipart/form-data".

Tiếp theo, phương thức hành động cho biểu mẫu này. Hành động chấp nhận hai thông số đầu vào:

UserModel mô hình: có tất cả dữ liệu được nhập trong biểu mẫu. HttpPostedFileBase tệp: đây là nơi bạn sẽ đăng hình ảnh đã tải lên của mình lên. Mã số

[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"); 

    } 

Đôi khi bạn cũng có thể yêu cầu tải lên nhiều hình ảnh, không khó dưới đây là mã cho điều đó. Sử dụng IEnumerable.

Razor Code:

@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" /> 
} 

và đây là cách bạn sẽ đọc các tập tin đăng.

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

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

}

Bây giờ bạn đã tải lên hình ảnh và lưu lại con đường hình ảnh, nhiệm vụ tiếp theo là để hiển thị hình ảnh.

Hiển thị hình ảnh đã tải lên

Chúc mừng!

Tài liệu tham khảo ** **

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