Hochladen / Anzeigen von Bildern in MVC 4

83

Kennt jemand Schritt-für-Schritt-Anleitungen zum Hochladen / Anzeigen von Bildern aus einer Datenbank mit Entity Framework? Ich habe Codefragmente ausgecheckt, bin mir aber immer noch nicht sicher, wie es funktioniert. Ich habe keinen Code, denn abgesehen vom Schreiben eines Upload-Formulars bin ich verloren. Jede (und ich meine jede) Hilfe wird sehr geschätzt.

Warum behandeln keine Bücher dieses Thema? Ich habe sowohl Pro ASP.NET MVC 4 als auch Professional MVC4 und sie erwähnen es nicht.

Verstanden
quelle
6
Wenn Sie folgen Pro ASP MVC 4die SportsStore Tutorialerledigen diesen Ausgang decken aufpage 292
Komengem
Du hast recht. Ich habe es nicht einmal bemerkt. War auf der Suche nach einem Kapitel darüber. Vielen Dank
Rogerthat
2
Ich weiß, dass dies für MVC 4 ist, aber diese Frage wird immer noch angezeigt, wenn Sie nach MVC 5 suchen. - Ich habe ein großartiges Tutorial gefunden, das sowohl das Hochladen in eine Datenbank als auch das Hochladen auf einen Dateiserver in Mvc 5 mit EF 6 auf MikesDotNetting mikesdotnetting behandelt. com / article / 259 /…
Vahx
Das Kapitel im Buch behandelt das Hochladen von Bildern in die Datenbank, wobei die meisten Benutzer den Pfad zur Datenbank und das Bild in einem Ordner speichern möchten.
Schneebesen

Antworten:

142

Schauen Sie sich Folgendes an

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

Ihr Controller sollte über eine Aktionsmethode verfügen, die dies akzeptiert 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");
    }

Update 1

Wenn Sie Dateien mit jQuery asynchron hochladen möchten, versuchen Sie diesen Artikel .

Der Code für die Serverseite (für mehrere Uploads) lautet:

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

Dieses Steuerelement gibt auch den Bildnamen zurück (in einem Javascript-Rückruf), mit dem Sie das Bild im DOM anzeigen können.

UPDATE 2

Alternativ können Sie Async File Uploads in MVC 4 ausprobieren .

Idrees Khan
quelle
Beeindruckend. Vielen Dank. Ich werde es ausprobieren. Welche Ressourcen, an die Sie denken können, kann ich lesen, um mein Wissen zu diesem Thema zu erweitern? Ich kann nichts finden
Rogerthat
1
nachdem ich , file.SaveAs(path)wie kann ich die Datei von diesem Pfad dann löschen?
J86
Die Verwendung von anglejs zum Senden von HTML-Dateitypbildern an die Serverseite ist einfacher. Stackoverflow.com/a/26409100/900284
Frank Myat Do
@FrankMyatThu Winkel nur zum Hochladen von Bildern verwenden? klingt das nicht ein bisschen seltsam?
Idrees Khan
1
@DotNetDreamer Ich würde Ihre Website so schnell wie möglich überprüfen, da es dort detaillierte Fehlerprotokollierung gibt, die im Moment einige ziemlich wichtige Informationen enthüllt ...
Gareth
45

Hier ist ein kurzes Tutorial:

Modell:

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

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

Aussicht:

  1. Erstellen:

    @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. Index (zur Anzeige):

    @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. Controller (Erstellen)

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

Hoffe das wird helfen :)

Миле Милошески
quelle
Wow, vielen Dank dafür. Was wäre, wenn ich das Bild auf JPEG beschränken wollte?
Kala J
@KalaJ Wenn Sie die hochgeladenen Bilder nur auf JPG beschränken möchten, können Sie das Attribut accept hinzufügen (HTML5 funktioniert nur in Chrome und FF, nicht in IE). Oder Sie können die Erweiterung im Controller so filename.LastIndexOf(".")etwas überprüfen . Hoffe das hilft
Jordy van Eijk
@JordyvanEijk, ich habe das Attribut accept verwendet, es funktioniert jedoch nur in Chrome. Es funktioniert nicht in FF oder IE. Ich brauche eine andere Form der Validierung.
Kala J
1
@ KalaJ Majbe Sie können etwas mit der Html5-Datei- API tun Wenn Sie ein Tutorial benötigen Hier ist es
Jordy van Eijk
2
Hacker könnten schädliche Dateien ohne serverseitige Überprüfung hochladen.
Arao6
-16
        <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];
         }


    }
user3789888
quelle
Also, wie würden Sie "msg" als Bild für img anzeigen?
eaglei22
Sie sollten diese Antwort löschen und Ihre Reputationspunkte zurückerhalten.
Noobprogrammer