Bildvorschau Fileupload in neuem Fenster

[AppAm]

Hallo,


ich möchte folgendes per javascript umsetzten:


Durch Klick auf den Hochladen-Button (index.html), und auswählen der Bilddatei von der Festplatte, soll eine automatische Weiterleitung zu einer neuen Seite (upload.html) stattfinden. Das Vorschaubild soll dann in dem neuen Fenster (upload.html) erscheinen.


In dem neuen Fenster (upload.html) kann der User dann den Datei-Upload bestätigen.


Für die Bildvorschau habe ich folgenden Code im Netz gefunden:

<form id="form1" runat="server">

        <input type='file' id="imgInp" />

        <img id="target" src="#" alt="your image" />

    </form>

function readURL(input) {

        if (input.files && input.files[0]) {

            var reader = new FileReader();           

            reader.onload = function (e) {

                $('#target').attr('src', e.target.result);

            }

           

            reader.readAsDataURL(input.files[0]);

        }

    }

Die Weiterleitung möchte ich über window.location realisieren:

window.location = "upload.html";

Wie kann ich jetzt die ausgewählte Bilddatei, die ich auf index.html ausgewählt habe, auf die neue Seite (upload.html) transportieren und diese dort als Vorschau anzeigen lassen ?

 

[Sempervivum]

Ich habe zwar nicht viel Erfahrung mit diesem Thema aber weil dir sonst niemand antwortet und ich gern etwas dazu lerne, probiere ich es mal:
Für die Übertragung an die zweite Seite sehe ich folgende Möglichkeiten: Offenbar liegt das Bild als base64-kodierter String vor.

1. Übertragung als URL-Parameter.
2. Schreiben nach Localstorage in der Quellseite und Lesen in der Zielseite.

1. wird wohl an der maximalen Länger der URL mit Parameter scheitern:
http://stackoverflow.com/questions/812925/what-is-the-maximum-possible-length-of-a-query-string

Auch bei 2. wird die Kapazität nicht in jedem Fall ausreichen weil Bilder durchaus mehr als 10 MB groß sein können:
http://stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values

Ich empfehle, das Konzept mit den zwei Seiten zu überdenken. Du könntest das Vorschaubild wahrscheinlich genau so gut in einem Modal auf der selben Seite anzeigen.

 

[Sempervivum]

PS: Ich vergaß: Man kann auch ein Formular und einen POST-Parameter verwenden. Dann liegen die Werte in der selben Größenordnung wie beim Localstorage:
http://stackoverflow.com/questions/2364840/what-is-the-size-limit-of-a-post-request

 

[Sempervivum]

PPS: Und wir haben noch gar nicht berücksichtigt, dass diese Daten ja auch hoch und herunter geladen werden müssen, was bei mehreren MB eine merkliche Wartezeit bedeuten würde. Spricht ebenfalls gegen das Verfahren mit zwei Seiten.