Javascript om file field gegevens in img te zetten
Ik wil als ik met een file field een plaatje heb geselecteerd,
dat de tekst die in het file field komt als SRC in een image worden gezet.
Heeft iemand enig idee hoe ik dit voor elkaar krijg?
Ik neem aan een onchange variabel op de file field.
Maar hoe krijg ik de waarde van het file field in een img src?
Groetjes Joni
Code (php)
1
<input name="foto1" type="file" onchange="document.getElementById('foto1').img.src=document.stap4.foto1.value;" />
Het fromulier heet stap4 en de filefield foto1
Gewijzigd op 01/01/1970 01:00:00 door Joni Fleischer
Dus iets à la:
var path = document.getElementById('inputid').value;
document.getElementById('plaatjeid').src = path;
Zelf moet je zelf even bedenken enzo.
Weet niet zeker of dit gaat werken. Sommige browsers verwachten ook een bepaalde manier van die path.
Dus ik heb nog geen idee hoe je dit dan voor elkaar krijgt.
Edit: net even gecheckt, en dat kan wel. Maar het plaatje staat natuurlijk pas op je webserver na de upload. Dus op het moment dat de waarde van je file-input verandert heb je daar nog niets aan.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Jan Koehoorn schreef op 05.11.2009 23:16:
Volgens mij kun je om veiligheidsredenen de value van een file field niet pakken met JavaScript.
Mooi, goed onthouden.
http://hedgerwow.appspot.com/image-upload-preview/demo.html
maar die van google werkt niet?
En nergens op google kan ik iets vinden die een preview geeft VOOR het geupload word.
En het enige wat ik wil is dat een afbeelding die word geselecteerd
een prefix krijgt met file:\\\ dus meer dan een plaatje echoen vanuit de hardeschijf, dat is dan de preview. Is dat te simpel gedacht?
Het is als zij een foto uploaden dat ze dus DIE foto vooraf kunnen zien..
Niet de foto op mijn harde schijf maar hun eigen geselecteerde foto..
JOni schreef op 06.11.2009 16:10:
ik heb even gekeken.
maar die van google werkt niet?
maar die van google werkt niet?
Hij werkt wel maar alleen niet in IE
in FF doet hij het verder netjes, er zijn vele scripts kwa preview te verkrijgen, dus ff google raadplegen
Ik heb het op google dus niet kunnen vinden...
Maar dank je wel Michel voor het meedenken.
Ik meende dat je in Firefox 3.5, of 3.6 zelfs de bestanden via files[] array van zo'n input-element rechtstreeks aanspreken en uitlezen, zodat je ze via (de ook aangepaste) XMLHTTPRequest API kan uploaden.
(diezelfde files[]-array krijg je trouwens ook bij een ondrop event wanneer je een bestand binnen het browserscherm sleept)
Voorbeeldje :)
Waarschijnlijk via flash?