MVC 4 में चित्र अपलोड / प्रदर्शित करना

Question

एंटिटी फ्रेमवर्क का उपयोग करके किसी डेटाबेस से छवियों को अपलोड / प्रदर्शित करने के तरीके पर किसी भी कदम से किसी को भी पता है? मैंने कोड स्निपेट की जांच की है, लेकिन मैं अभी भी स्पष्ट नहीं हूं कि यह कैसे काम करता है। मेरे पास कोई कोड नहीं है, क्योंकि अपलोड फॉर्म लिखने से अलग, मैं हार गया हूं। किसी भी (और मेरा मतलब है) किसी भी मदद की बहुत सराहना की जाती है।

एक विचारधारा पर, कोई भी पुस्तक इस विषय को कवर क्यों नहीं करती है? मेरे पास प्रो ASP.NET MVC 4 और व्यावसायिक MVC4 दोनों हैं, और वे इसका कोई उल्लेख नहीं करते हैं।

Comments

आप का पालन करें पर इस आरंभिक कवर करता हैPro ASP MVC 4SportsStore Tutorialpage 292

— Komengem

आप सही हे। मैंने नोटिस भी नहीं किया। उस पर एक अध्याय की तलाश कर रहा था। धन्यवाद

— rogerthat

मुझे पता है कि यह MVC 4 के लिए है, लेकिन यह प्रश्न अभी भी MVC 5 की तलाश में दिखाई देगा। com / लेख / 259 /…

— Vahx

पुस्तक में अध्याय डेटाबेस में अपलोडिंग छवियों को शामिल करता है, जहां अधिकांश लोग डेटाबेस और छवि को फ़ोल्डर में पथ को सहेजना चाहते हैं।

— धीरे

Answer 1

निम्नलिखित पर एक नजर है

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, 
                            new { enctype = "multipart/form-data" }))
{  
    <label for="file">Upload Image:</label> 
    <input type="file" name="file" id="file" style="width: 100%;" /> 
    <input type="submit" value="Upload" class="submit" /> 
}

आपके नियंत्रक के पास एक्शन विधि होनी चाहिए जो स्वीकार करेगी HttpPostedFileBase;

 public ActionResult FileUpload(HttpPostedFileBase file)
    {
        if (file != null)
        {
            string pic = System.IO.Path.GetFileName(file.FileName);
            string path = System.IO.Path.Combine(
                                   Server.MapPath("~/images/profile"), pic); 
            // file is uploaded
            file.SaveAs(path);

            // save the image path path to the database or you can send image 
            // directly to database
            // in-case if you want to store byte[] ie. for DB
            using (MemoryStream ms = new MemoryStream()) 
            {
                 file.InputStream.CopyTo(ms);
                 byte[] array = ms.GetBuffer();
            }

        }
        // after successfully uploading redirect the user
        return RedirectToAction("actionname", "controller name");
    }

अपडेट १

यदि आप asynchornously के साथ jQuery का उपयोग करके फ़ाइलें अपलोड करना चाहते हैं, तो इस लेख को आज़माएं ।

सर्वर साइड (कई अपलोड के लिए) को संभालने के लिए कोड है;

 try
    {
        HttpFileCollection hfc = HttpContext.Current.Request.Files;
        string path = "/content/files/contact/";

        for (int i = 0; i < hfc.Count; i++)
        {
            HttpPostedFile hpf = hfc[i];
            if (hpf.ContentLength > 0)
            {
                string fileName = "";
                if (Request.Browser.Browser == "IE")
                {
                    fileName = Path.GetFileName(hpf.FileName);
                }
                else
                {
                    fileName = hpf.FileName;
                }
                string fullPathWithFileName = path + fileName;
                hpf.SaveAs(Server.MapPath(fullPathWithFileName));
            }
        }

    }
    catch (Exception ex)
    {
        throw ex;
    }

यह नियंत्रण छवि नाम (एक जावास्क्रिप्ट कॉल बैक में) भी लौटाता है, जिसके बाद आप इसका उपयोग DOM में चित्र प्रदर्शित करने के लिए कर सकते हैं।

अद्यतन २

वैकल्पिक रूप से, आप MVC 4 में Async फ़ाइल अपलोड की कोशिश कर सकते हैं ।

Comments

वाह। धन्यवाद। मैं इसे आज़माऊँगा। कोई भी संसाधन, जिसके बारे में आप सोच सकते हैं, मैं इस विषय पर अपना ज्ञान बढ़ाने के लिए पढ़ सकता हूं? मुझे कुछ नहीं मिल रहा है।

— रोघर्टाट

करने के बाद file.SaveAs(path)मैं उस रास्ते से फ़ाइल को कैसे हटा सकता हूं?

— 14:86 पर J86

सर्वर पक्ष को html फ़ाइल प्रकार की छवि भेजने के लिए कोणीयज का उपयोग करना अधिक आसान है, stackoverflow.com/a/26409100/900284

— फ्रैंक मायत थू

@FrankMyatThu केवल छवियों को अपलोड करने के लिए कोणीय का उपयोग कर रहा है? वह आवाज़ थोड़ी अजीब नहीं है?

— खान

@DotNetDreamer मैं आपकी वेबसाइट की जाँच ASAP से करूँगा क्योंकि उस समय कुछ महत्वपूर्ण जानकारी को उजागर करने के लिए वहाँ पर विस्तृत त्रुटि लॉगिंग है ...

— Gareth

Answer 2

यहाँ एक छोटा ट्यूटोरियल है:

नमूना:

namespace ImageUploadApp.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Image
    {
        public int ID { get; set; }
        public string ImagePath { get; set; }
    }
}

राय:

1. सृजन करना:

   @model ImageUploadApp.Models.Image
   @{
       ViewBag.Title = "Create";
   }
   <h2>Create</h2>
   @using (Html.BeginForm("Create", "Image", null, FormMethod.Post, 
                                 new { enctype = "multipart/form-data" })) {
       @Html.AntiForgeryToken()
       @Html.ValidationSummary(true)
       <fieldset>
           <legend>Image</legend>
           <div class="editor-label">
               @Html.LabelFor(model => model.ImagePath)
           </div>
           <div class="editor-field">
               <input id="ImagePath" title="Upload a product image" 
                                     type="file" name="file" />
           </div>
           <p><input type="submit" value="Create" /></p>
       </fieldset>
   }
   <div>
       @Html.ActionLink("Back to List", "Index")
   </div>
   @section Scripts {
       @Scripts.Render("~/bundles/jqueryval")
   }
   

2. सूचकांक (प्रदर्शन के लिए):

   @model IEnumerable<ImageUploadApp.Models.Image>
   
   @{
       ViewBag.Title = "Index";
   }
   
   <h2>Index</h2>
   
   <p>
       @Html.ActionLink("Create New", "Create")
   </p>
   <table>
       <tr>
           <th>
               @Html.DisplayNameFor(model => model.ImagePath)
           </th>
       </tr>
   
   @foreach (var item in Model) {
       <tr>
           <td>
               @Html.DisplayFor(modelItem => item.ImagePath)
           </td>
           <td>
               @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
               @Html.ActionLink("Details", "Details", new { id=item.ID }) |
               @Ajax.ActionLink("Delete", "Delete", new {id = item.ID} })
           </td>
       </tr>
   }
   
   </table>
   

3. नियंत्रक (बनाएँ)

   public ActionResult Create(Image img, HttpPostedFileBase file)
   {
       if (ModelState.IsValid)
       {
           if (file != null)
           {
               file.SaveAs(HttpContext.Server.MapPath("~/Images/") 
                                                     + file.FileName);
               img.ImagePath = file.FileName;
           }  
           db.Image.Add(img);
           db.SaveChanges();
           return RedirectToAction("Index");
       }
       return View(img);
   }
   

आशा है कि यह मदद करेगा :)

Comments

वाह, इसके लिए बहुत-बहुत धन्यवाद। क्या होगा अगर मैं छवि को jpeg तक सीमित करना चाहता हूं?

— काल जे।

@KalaJ यदि आप केवल jpg पर अपलोड की गई छवियों को प्रतिबंधित करना चाहते हैं, तो आप स्वीकार विशेषता (Html5 केवल Chrome और FF नहीं IE में काम कर सकते हैं) को जोड़ सकते हैं। या आप कंट्रोलर में एक्सटेंशन को filename.LastIndexOf(".")कुछ इस तरह से चेक कर सकते हैं । आशा है कि यह मदद करता है

— जॉर्डन वैन Eijk

@JordyvanEijk, मैंने स्वीकार विशेषता का उपयोग किया, लेकिन यह केवल क्रोम में काम करता है। यह FF या IE में काम नहीं करता है। मुझे सत्यापन के किसी और रूप की आवश्यकता है।

— काला जे

@ काला माजे आप Html5 File Api के साथ कुछ कर सकते हैं यदि आपको कुछ ट्यूटोरियल की आवश्यकता है तो यह है

— जॉर्डन वैन Eijk

हैकर्स सर्वर-साइड सत्यापन के बिना दुर्भावनापूर्ण फ़ाइलों को अपलोड करने में सक्षम होंगे।

— arao6

Answer 3

        <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
 $("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

                    },
                    error: function (error) {
                        alert("errror");
                    }
                });

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }

Comments

तो, आप छवि के रूप में "संदेश" कैसे प्रदर्शित कर सकते हैं?

— ईगलीन 22

आपको इस उत्तर को हटा देना चाहिए और अपने प्रतिष्ठा अंक वापस प्राप्त करने चाहिए।

— noobprogrammer