MVC 3 उस्तरा

Question

खैर में एक अपलोड की गई छवि प्रदर्शित, इस नौसिखिया कुछ गलत कर रहा है जब सर्वर पर अपलोड चित्रों का प्रदर्शन:

मॉडल:

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

नियंत्रक (अपलोड - द्वारा कहा जाता है [HttpPost] public 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> 
} 

अब तक तो अच्छा, छवि फ़ोल्डर में अपलोड किया जाता है और यूआरएल

सहेजा गया है अब, मैं विस्तार से देखें में यह देखना चाहते हैं

विवरण दृश्य:

<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 ई "।

मैं क्या गलत कर रहा हूं?

पीएस मैंने सर्वर के बिना कोशिश की है। मैपपाथ, सापेक्ष पता "~ \ App_Data \ अपलोड \ Fotos_nofoto.jpg" का उपयोग करके और परिणाम वही है।

--- संपादित करें ---

@ kmcc049:

@Html.MyImage(Model.ImageUrl) 

उत्पन्न कोड: मैं एक सहायक

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

ध्यान में रखते हुए कॉल बनाने अपने सुझाव की कोशिश की है

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

लेकिन res ULT एक ही है: कोई छवि :(

--- हल ---

जाहिर App_Data क्योंकि उन्हें एक्सेस करने में त्रुटि 403 परिणाम होगा अपलोड की गई फ़ाइलों को बचाने के लिए एक अच्छा स्थान नहीं है - निषिद्ध। मैं फ़ाइलों को ~/अपलोड/फोटो में ले जाता हूं और यह काम करता है।

Answer 1

यह मान्य HTTP पथ नहीं है। यह आपके कंप्यूटर पर फ़ोल्डर का पथ है।

UrlHelper.GenerateContentUrl() विधि बजाय http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.generatecontenturl.aspx

Answer 2

एक चित्र अपलोड की कोशिश करते हैं और फिर इसे किसी भी वेब आवेदन के लिए एक बहुत ही आम आवश्यकता है प्रदर्शित। हाल ही में मुझे उपयोगकर्ता को प्रोफ़ाइल चित्र जोड़ने और बाद में इसे अपने डैशबोर्ड पर प्रदर्शित करने की अनुमति देने की आवश्यकता थी।

तो यहां मैंने जो किया है, आशा है कि इससे आपको भी मदद मिलेगी।

उस्तरा कोड

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

यहाँ नोट करने के लिए महत्वपूर्ण बात यह है कि हम एक एचटीएमएल संपत्ति enctypeenctype="multipart/form-data" के रूप में बुलाया जोड़ लिया है है।

अगला, इस फ़ॉर्म के लिए क्रिया विधि। कार्रवाई दो इनपुट पैरामीटर स्वीकार करती है:

UserModel मॉडल: फ़ॉर्म में सभी डेटा दर्ज किए गए हैं। HttpPostedFileBase फ़ाइल: यहां वह जगह है जहां आपकी अपलोड की गई छवि पोस्ट की जाएगी। कोड

[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