Wie zum hochladen von einem Bild-und display auf der selben Seite in asp.net mvc 4

entwickelt ich eine web-Anwendung mit asp.net mvc4 und razor syntax.
ich brauche, um ein Bild hochzuladen mit dem Datei uploader und die Anzeige auf der gleichen Seite mit details des Bildes.

als ein Beispiel, es gibt eine "file uploader" und "submit button" im "contact page" meiner Anwendung. wenn ich ein Bild hochladen von einer person und click den submit-button angezeigt werden soll das Bild irgendwo auf der Seite mit den Angaben wie Bild-name, Größe, wie die.

gibt es überhaupt eine Möglichkeit das zu erreichen?

hier ist der code für meine controller-Klasse

public class FileUploadController : Controller
    {
        //
        //GET: /FileUpload/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult FileUpload()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult FileUpload(HttpPostedFileBase uploadFile)
        {
            if (uploadFile.ContentLength > 0)
            {
                string filePath = Path.Combine(HttpContext.Server.MapPath("~/Img/"),
                                               Path.GetFileName(uploadFile.FileName));
            }
            return View();
        }
    }

und hier ist der code für die Ansicht

<h2>FileUpload</h2>

     @(Html.BeginForm("FileUpload", "FileUpload",FormMethod.Post, new { enctype = "multipart/form-data" }))
        <input name="uploadFile" type="file" />
        <input type="submit" value="Upload File" />

aber, wie die Anzeige auf der Seite?

bitte helfen.

  • is there any possible way to achieve that? - ja, natürlich. Wo hast du bisher? Welche Forschung hast du und welchen code hast du versucht zu schreiben? Welchen Schwierigkeiten begegnen Sie mit diesem code, den Sie möchten, um danach zu Fragen?
InformationsquelleAutor sanzy | 2013-06-12
  1. 18

    Sobald Sie speichern Sie die hochgeladene Datei auf dem server, von Ihrem controller-Aktion, Sie konnten wieder übergeben Sie die url zu dieser Datei in der Ansicht so, dass es angezeigt werden kann in einem <img> tag:

    public class FileUploadController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FileUpload()
    {
        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult FileUpload(HttpPostedFileBase uploadFile)
    {
        if (uploadFile.ContentLength > 0)
        {
            string relativePath = "~/img/" + Path.GetFileName(uploadFile.FileName);
            string physicalPath = Server.MapPath(relativePath);
            uploadFile.SaveAs(physicalPath);
            return View((object)relativePath);
        }
        return View();
    }
}

    Dann stellen Sie Ihre Sicht stark typisiert und fügen Sie eine <img> tag, dass das Bild angezeigt wird, wenn das Modell ist nicht leer:

    @model string
<h2>FileUpload</h2>

@using (Html.BeginForm("FileUpload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" })
{
    <input name="uploadFile" type="file" />
    <input type="submit" value="Upload File" />
}

@if (!string.IsNullOrEmpty(Model))
{
    <img src="@Url.Content(Model)" alt="" />
}
    • Haha, Darin ich bin überrascht, dass Sie sich die Zeit genommen, auf diesen einen..
    • Warum würde ich die Zeit nehmen? Sobald die OP aktualisiert seine Antwort mit Codebeispiel, was er versucht, so weit habe ich sofort entfernt, mein downvote von seiner Frage und antwortete es.
    • ich benutzt den code, den Sie gegeben und seine Arbeit. danke anywy.. 🙂 aber eine Sache, die ich nicht erstellt haben jedes Modell für diese.. und ich möchte die Größe des Bildes vor dem anzeigen und wie zu tun? muss ich für das Modell verwenden oder was?
    • Du könntest die Größe des Bildes auf dem server vor der Speicherung auf der Festplatte. Und dann pass die Größe geändert, die Datei an den client.
    • Ich sah, dass er seinen code in den Kommentar, und ich steckte es in seine Antwort für ihn.
    InformationsquelleAutor Darin Dimitrov
  2. 3

    in HTML: 

    <input type='file' onchange="readURL(this);" />

    Javascript/JQuery-durch die Art FileReader 

    if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }

    wo input ist die <input type="file"> element
    wenn Sie AjaxToolKit AsyncFileUpload, können Sie die Eingabe mit: fileUploadElement.get_inputFile()

    Bitte refere: wie, um die Vorschau eines Bildes vor und nach dem upload?

    InformationsquelleAutor Muhammad Omar ElShourbagy
  3. 1

    Zur Anzeige von hochgeladenen Bild auf der Seite, haben Sie, um das Bild zu speichern, irgendwo, verweisen Sie auf entsprechende URL in der <img> tag.

    Wenn Sie speichern es auf der Festplatte innerhalb des Internetangebotes Lage, können Sie auf es durch den URL-entspricht der Speicherort (also, wenn Sie speichern Sie es auf Img die relative URL wäre ~/Img/imagename).

    Wenn Sie in der Datenbank speichern, müssen Sie einen separaten action-Methode oder HttpHandler um es zu bekommen.

    • ja Andrej. seine Logik konnte ich nicht durchgehen. danke für die Hilfe.. 🙂
    InformationsquelleAutor Andrey Shchekin
  4. -1

    So, hier ist die typische Durchflussmenge für so etwas.

    1. Sie beginnen auf der Index Aktion, die Sie sehen können, die fileupload-Kontrolle.
    2. Das fileupload-Steuerelement in einem Formular, legen Ihre FileUpload Aktion.
    3. In Ihrem FileUpload Aktion, die Sie machen Ihr Ding und am Ende hat man return RedirectToAction("Index");

    Nun, offensichtlich gibt es mehr zu tun. Sie müssen speichern Sie diese Datei irgendwo, sagen wir mal in einem Verzeichnis namens UploadStuff.

    In Ihrem index Aktion, die Sie Lesen werden, das Verzeichnis für Ihre Datei.

    Wieder dies ist, um Sie gehen. In der realen Welt bist du das speichern einer Referenz auf diese Datei, sagen wir eine Datenbank und eine Abfrage dieser Datenbank auf der Grundlage von einigen unique identifier, wie z.B. eine Benutzer-id oder einer productId, um herauszufinden, welche hochgeladen werden Elemente angezeigt, auf der index-Ansicht.

    InformationsquelleAutor The Muffin Man
Schreibe einen Kommentar