bildupload vorschau

[FoXMorayn]

Hallo,

ich habe ein formular mit einem bildupload.

bevor dieses formular abgeschickt wird, möchte ich die vorschau des bildes anzeigeigen. verschachtelte formulare funktionieren nicht und file inputs kann ich nicht manipulieren.

<form>
<file> Dieses file soll vor dem abschicken des ganzen formulars durch mein thumbnail script wandern und angezeigt werden.
</form>


hat jemand eine idee? eine lösung per ajax würde ich vorziegen, da das komplette projekt schon auf ajax basiert.

gruß,
FoXMorayn

 

[Gilles]

Entweder nutzt du iframes oder du lässt es normal hochladen, lässt es als thumbnail anzeigen und lässt es erst aus einem temporären Verzeichnis rauswandern, wenn der User das Bild bestätigt hat (Oder was du auch immer vor hast ). Du musst natürlich ein Script haben, welchen den temporären Ordner auf alte Dateien überprüft. Falls du sowas nicht machen wolltest (Ich denke da immer an Avatar Vorschau). Falls du was ganz anderes meintets einfach schreiben :)
Aber nochmal als Fazit. Es gibt keine reine Javascript (Ajax) Variante für ein uploadscript.
Das einzige was ich gefunden habe, das mit Iframes arbeitet ist dieses hier:
AJAX file upload tutorial

 

[Efchen]

bevor dieses formular abgeschickt wird, möchte ich die vorschau des bildes anzeigeigen.

Das ist nicht möglich. Solange das Formular nicht abgeschickt ist, hast Du ja keinen Zugriff auf das Bild, weil es sich noch auf der Platte des Nutzers befindet. Für eine Vorschau muss das Bild erst hochgeladen werden.

verschachtelte formulare funktionieren nicht und file inputs kann ich nicht manipulieren.

Verschachtelte Formulare machen auch gar keinen Sinn und dass Du File Inputs nicht manipulieren kannst, ist ja wohl klar, sonst könntest Du jede beliebige Datei meiner Festplatte kopieren.

hat jemand eine idee? eine lösung per ajax würde ich vorziegen, da das komplette projekt schon auf ajax basiert.

Bildupload starten, Vorschau anzeigen, ggfs. neues Formular erstellen, das die Daten dann erst bei Bestätigung verarbeitet.
Ob mit oder ohne Ajax sollte an der Stelle wurscht sein.

 

[FoXMorayn]

danke für eure antworten. es führt also kein weg an einem normalen form submit vorbei, was eigentlich auch gut so ist.

<script>
function change()
{
    document.getElementById('upload').setAttribute('action','vorschau.php',0);
    document.getElementById('upload').setAttribute('target','new',0);
    upload.submit();
    document.getElementById('upload').setAttribute('action','#',0);
    document.getElementById('upload').setAttribute('target','_self',0);
    
}
</script>

<form enctype='multipart/form-data' method='post' name="upload" id='upload' action='#' target='new'>
    <input type='file' name='Bild' onchange="change()"> 
    <input type='submit' value='Hochladen'>
</form>


<iframe name="new"></iframe>

damit schicke ich das bild zuerst automatisch durch ein thumbnail script und gebe es im iframe aus.
vllt hab ich vergessen zu erwähnen, dass ich das formular danach nochmal an ein magento abschicken muss.