Bild laden mit Javascript aus ASP.NET FileUpload-control

Ich versuche, das laden einer asp-image-box <asp:Image ID="imgPicture" width="200" height="200" runat="server" /> mit einem Bild, nachdem ein Benutzer ausgewählt wurde, der eine mit der asp.net fileupload-control <asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>

HTML 

<asp:Image ID="imgPicture" width="200" height="200" runat="server" />
<asp:FileUpload ID="fluPicture" runat="server" OnChange="LoadImage(this.value, 'imgPicture');" Width="200"/>

Javascript 

<script type="text/javascript">
    function LoadImage(path, img) {
        imgPrev = document.images[img];
        imgPrev.src = path;
   }
</script>

Das Bild wird nicht geladen, in der imgPicture Kontrolle. Auch habe ich bemerkt, dass durch das hinzufügen einer Warnung an die javascript-Funktion weist den Weg und Bild-der Weg ist C:\fakepath\ImageName.jpg. Ich bin nicht sicher, warum es sagt, fakepath.

Jede Hilfe ist willkommen. Beachten Sie auch, dass dieses Projekt ein C# - code-Datei dahinter.

  • kann nicht sehen Sie Ihre HTML-oder JS. Können Sie fügen Sie diese? Stellen Sie sicher, Sie formatieren Sie den code richtig verwenden einen code-block in den editor :]
  • Ich entschuldige mich. Es sollte sichtbar sein, jetzt, thx.
InformationsquelleAutor puddinman13 | 2011-05-09
  1. 2

    Nachdem alle Ihre Eingabe, ich habe es mir anders FileInput control-code wie folgt: 

    <asp:FileUpload ID="fluPicture" onchange="if (confirm('Upload ' + this.value + '?')) this.form.submit();" runat="server" Width="200"/>

    Ich dann noch ein test zu der Seite.OnLoad-Ereignis, um festzustellen, ob die Datei bereit ist
    hochgeladen. 

    if (fluPicture.PostedFile != null && fluPicture.PostedFile.ContentLength > 0) UploadImage();

    Dann darf ich die UploadImage () - Methode, um das Bild hochzuladen, speichern Sie es, und legen Sie dann die url des Bildfensters, um die hochgeladenen Bild-url.

    Danke Euch allen für Eure Hilfe und input. Auch Schätze ich die jQuery-Ideen. In diesem Fall, ich brauchte nur etwas quick und dirty, den job zu erledigen.

    InformationsquelleAutor puddinman13
  2. 0

    Du die Datei wird nicht hochgeladen, bis Sie einen Beitrag zurück, es klingt wie Ihr nur das surfen auf die Datei und dann versucht, ein thumbnail, bevor Sie nach zurück/das Bild hochzuladen.

    • Recht verstehe ich es noch nicht am server liegen, aber nicht javascript die Fähigkeit haben, laden Sie das Bild von der Kunden-Maschine, die in das Bild der Vorschau-box, ohne den ersten zu tun, einen postback? Ich Mach dem hochladen des Bildes zu einem späteren Zeitpunkt im Lebenszyklus.
    • Eigentlich, Nein, tut es nicht. Die Datei-upload-Steuerelement verfügt über eine sehr restriktive Berechtigungen, und jede Art von client-Seite Verarbeitung deaktiviert ist.
    • Ihre andere option ist die Verwendung eines ajax-Stil-upload-Steuerelement, das können Sie sofort den post zurück, Ihre Datei auf den server. Hier ist ein link mit ein paar Beispielen, die jQuery verwenden. webdeveloperjuice.com/2010/02/13/...
    • Hier ist ein weiterer link, der sah gut aus, es beschreibt einen Schnitt zu ermöglichen, die Sie hochladen und in der Vorschau ein Bild. zurb.com/playground/ajax_upload
    InformationsquelleAutor Zachary
  3. -2

    ASP.Net (HTML) - CODE :

    <asp:FileUpload ID="FileUpload1" runat="server" Height="22px" onchange="showImage()"/>
<asp:Image ID="Image1" runat="server" Width="200PX" Height="200PX"   />

    JAVASCRIPT-CODE :

    function showImage() 
        {
            //Get File Upload Path & File Name
            var file = document.getElementById("FileUpload1");
            //Set Image Url from FileUploader Control
            document.getElementById("Image1").src = file.value;
            //Display Selected File Path & Name
            alert("You selected " + file.value);
            //Get File Size From Selected File in File Uploader Control 
            var inputFile = document.getElementById("FileUpload1").files[0].size;
            //Displaty Selected File Size
            alert("File size: " + inputFile.toString());
        }

    Ich denke, Dass kann Dir Helfen. seine perfekt auf meinem pc laufen.

    • 1. Dies hatte nichts zu tun mit der Anzeige der Dateigröße. 2. Diese Frage wurde Jahren gelöst.
    InformationsquelleAutor Max
Schreibe einen Kommentar