Ich habe eine Webanwendung entwickelt, die asp.net mvc4 und razor verwendet. Ich muss ein Bild hochladen mit Datei-Uploader und auf der gleichen Seite mit Details des Bildes anzeigen.
Als Beispiel gibt es eine "file uploader" und "submit button" in "contact page" meiner Anwendung. Wenn ich ein Bild einer Person und click den Submit-Button hochlade, sollte das Bild irgendwo auf der Seite mit seinen Details wie dem Bildnamen und der Größe angezeigt werden.
Gibt es eine Möglichkeit, das zu erreichen?
Hier ist der Code für meine Controller-Klasse
%Vor%und hier ist der Code für die Ansicht
%Vor%aber wie auf der Seite angezeigt werden?
bitte helfen.
Sobald Sie die hochgeladene Datei von Ihrer Controller-Aktion auf dem Server gespeichert haben, können Sie die URL an diese Datei zurückgeben, damit sie in einem <img> -Tag angezeigt werden kann:
Machen Sie Ihre Ansicht dann stark typisiert und fügen Sie ein <img> -Tag hinzu, das das Bild anzeigt, wenn das Modell nicht leer ist:
Um das hochgeladene Bild auf der Seite anzuzeigen, müssen Sie das Bild irgendwo speichern und dann auf die entsprechende URL im <img> -Tag verweisen.
Wenn Sie die Datei auf dem Datenträger im Website-Speicherort speichern, können Sie auf die URL verweisen, die dem Speicherort entspricht (wenn Sie also die Datei in Img speichern, lautet die relative URL ~/Img/imagename ).
Wenn Sie es in der Datenbank speichern, müssen Sie eine separate Aktionsmethode bereitstellen oder HttpHandler , um es zu erhalten.
in HTML:
%Vor% Javascript / JQuery durch den Typ FileReader
wobei input das <input type="file"> -Element ist
Wenn Sie AjaxToolKit AsyncFileUpload verwenden, können Sie die Eingabe mithilfe von fileUploadElement.get_inputFile()
Bitte beachten Sie: wie Sie ein Bild vor und anzeigen nach dem Hochladen?
Hier ist der typische Ablauf für so etwas.
Index , in der Sie das Fileupload-Steuerelement sehen können. FileUpload Aktion gesendet wird. FileUpload Aktion machst du dein Ding und am Ende hast du return RedirectToAction("Index");
Jetzt gibt es offensichtlich mehr zu tun. Sie müssen diese Datei irgendwo speichern, sagen wir in einem Verzeichnis namens UploadStuff .
Innerhalb Ihrer Indexaktion lesen Sie das Verzeichnis für Ihre Datei.
Auch hier geht es um dich. In der realen Welt speichern Sie einen Verweis auf diese Datei in einer Datenbank und fragen diese Datenbank anhand eines eindeutigen Bezeichners wie einer userId oder einer productId ab, um herauszufinden, welche hochgeladenen Elemente in der Indexansicht angezeigt werden.
>Tags und Links c# razor asp.net-mvc-4 image-upload