Téléchargement/Affichage des Images dans MVC 4

Quelqu'un sait de toute l'étape par étape tutoriels sur la façon de télécharger/afficher des images à partir d'une base de données à l'aide de Entity Framework? J'ai vérifié les extraits de code, mais je ne suis toujours pas clair sur la façon dont il fonctionne. Je n'ai pas de code, car en dehors de l'écriture d'un formulaire d'upload, je suis perdu. Tout (et je dis bien tout) aide est grandement appréciée.

Sur un passage, pourquoi ne pas tout livres traitent de ce sujet? J'ai à la fois Pro ASP.NET MVC 4 et Professionnel MVC4, et ils ne font aucune mention de celui-ci.

Si vous suivez Pro ASP MVC 4 la SportsStore Tutorial à ne couvrir que ce départ sur page 292
vous avez raison. Je n'ai pas le même avis. A la recherche d'un chapitre sur elle. Merci
Je sais que c'est pour MVC 4, mais cette question sera affichée lors de la recherche pour MVC 5. - J'ai trouvé un tutoriel qui couvre à la fois le Téléchargement de la Base de données de Télécharger vers un serveur de fichier Mvc 5 à l'aide de EF 6 sur MikesDotNetting mikesdotnetting.com/article/259/...
Le chapitre dans le livre couvre le téléchargement d'images à la base de données, où la plupart des gens veulent enregistrer le chemin d'accès à la base de données et l'image dans un dossier.

InformationsquelleAutor rogerthat | 2013-04-27

asp.net-mvc-4 image

131

Ont un look à la suite de

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

votre contrôleur doit avoir une méthode d'action qui accepterait 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");
    }

Mise à jour de 1

Dans le cas où vous souhaitez télécharger des fichiers à l'aide de jQuery avec asynchornously, puis essayez cet article.

le code pour gérer le côté serveur (pour de multiples upload) est;

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

ce contrôle également retourner le nom de l'image (dans un javascript de retour d'appel) que vous pouvez ensuite l'utiliser pour afficher l'image dans les DOM.

Mise à JOUR 2

Sinon, vous pouvez essayer Async les Uploads de Fichier MVC 4.

wow. Merci. Je vais l'essayer. Toutes les ressources que vous pouvez penser, je peux lire pour approfondir mes connaissances sur ce sujet? Je ne peux pas trouver quoi que ce soit.
merci beaucoup. Telle une grande aide
si utile une fois sur www
après avoir fait file.SaveAs(path) comment puis-je supprimer le fichier à partir de ce chemin?
Serveur.MapPath("~/images/profil"), pic);
En utilisant angularjs pour envoyer le html de type de fichier de l'image à côté serveur est plus facile , stackoverflow.com/a/26409100/900284
à l'aide angulaire seulement de téléchargement d'images ? n'est-ce pas sembler un peu étrange ?
Ce n'est pas la réponse "comment faire pour afficher l'image une fois téléchargés."
J'aimerais vérifier votre site web dès que possible, car il y a l'enregistrement détaillé des erreurs s'y exposer certaines assez importante d'informations pour le moment...
le lien vers votre page web ne fonctionne pas. On dirait que votre page web est en panne.

InformationsquelleAutor DotNet Dreamer

Voici un bref tutoriel:

Modèle:

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

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

Vue:

Créer:

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

Index (pour l'affichage):

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

Contrôleur (Créer)

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

Espère que cela aidera 🙂

Wow, merci beaucoup pour cette. Que faire si je voulais restreindre l'image au format jpeg?
Si vous voulez restreindre les images téléchargées à seulement jpg vous pouvez ajouter l'accepter attribut (Html5 ne fonctionne qu'en Chrome et FF pas IE). Ou vous pouvez vérifier l'extension de contrôleur de filename.LastIndexOf(".") quelque chose comme ça. Espérons que cette aide
J'ai utilisé l'accepter attribut toutefois, il ne fonctionne que sur Chrome. Il ne fonctionne pas sous FF ou IE. J'ai besoin d'une autre forme de validation.
Majbe vous pouvez faire quelque chose avec le Html5 Fichier Api Si vous avez besoin d'un tutoriel c'est Ici
Les pirates seraient en mesure de télécharger des fichiers malveillants sans validation côté serveur.
qu'est-ce que db ici. Il dit que db n'existe pas dans le contexte actuel.
il est une instance d'un Entity Framework DbContext classe, qui est utilisé pour accéder à la base de données de l'objet dans le code.
Pour des raisons de sécurité, vous pouvez aussi avoir besoin de voir ce stackoverflow.com/a/6388927/900284

InformationsquelleAutor Миле Милошески

-12

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


    }

Alors, comment voulez-vous afficher, "msg" comme une image pour l'img?

InformationsquelleAutor user3789888

Vous devez vous connecter pour publier un commentaire.