[JS] Image tonen bij upload *

[Verwijderd]

simpel vraagje waarschijnlijk maar toch, na een hoop googelen kom ik er niet uit:

code:

<script language="javascript">
function preview()
{
 var src = document.getElementById('picField').value;
 document.getElementById('prev').src  = src;
}
</script>

<input name="userfile" type="file" id="picField" onchange="preview()">

[img]"leeg.gif"[/img]

als ie het script uitgevoerd heeft moet leeg.gif vervangen worden door de afbeelding die gekozen is.
echter de afbeelding veranderd wel, maar de src van de nieuwe afbeelding is wel de naam van de nieuwe afbeelding maar niet het hele locale adres.
Dus
http://www.hans.nl/nieuw.gif ipv
c:/mijn afbeeldingen/nieuw.gif

[ Voor 13% gewijzigd door Verwijderd op 01-03-2006 14:04 ]

[curry684]

-> Webdesign & Graphics en titel maar even afgemaakt

[Verwijderd]

Je hebt een fileinput en wilt dat ie niet het lokale-adres pakt, maar moet gokken waar dat remote staat? Je zult het toch eerst moeten uploaden...

[Verwijderd]

Nee, het moet een preview worden voordat ie gaat uploaden,
hij moet het locale bestand van jouw harde schijf laten zien.
Het is een script om een afbeelding te uploaden uiteindelijk

[Verwijderd]

Verwijderd schreef op woensdag 01 maart 2006 @ 14:12:
Nee, het moet een preview worden voordat ie gaat uploaden,
hij moet het locale bestand van jouw harde schijf laten zien.
Het is een script om een afbeelding te uploaden uiteindelijk

Dan moet je er file:// voor zetten... Dan laat ie het lokale bestand zien namelijk

Dus file://c:/mijn%20afbeeldingen/nieuw.gif

[ Voor 6% gewijzigd door Verwijderd op 01-03-2006 14:14 ]

[Verwijderd]

Nee, dat werkt ook niet dan zie ik wel file://
maar nog steeds niet de rest van de locatie (c://mijn afbeeldingen)
ik heb gezien dat het kan,maar kan die site niet meer vinden...

[Erkens]

Verwijderd schreef op woensdag 01 maart 2006 @ 14:23:
Nee, dat werkt ook niet dan zie ik wel file://
maar nog steeds niet de rest van de locatie (c://mijn afbeeldingen)
ik heb gezien dat het kan,maar kan die site niet meer vinden...

Als dat zou kunnen dan moet dat imo geblocked worden door de browser, dergelijke informatie mag je niet weten.
Wellicht dat het met een java applet is gedaan welke leesrechten heeft op je HD, dan kan het wel

[André]

code:

<script type="text/javascript">
  function preview()
  {
    document.getElementById("prev").src = "file:///" + document.getElementById("picField").value;
  }
</script>
<input name="userfile" type="file" id="picField" onchange="preview()">
<img src="leeg.gif" id="prev">

Bij mij werkt het met file:/// er voor wel

Erkens schreef op woensdag 01 maart 2006 @ 14:26:
[...]

Als dat zou kunnen dan moet dat imo geblocked worden door de browser, dergelijke informatie mag je niet weten.
Wellicht dat het met een java applet is gedaan welke leesrechten heeft op je HD, dan kan het wel

Waarom zou dat geblocked moeten worden? Je mag toch wel weten wat op je eigen schijf staat En je bent zelf verantwoordelijk voor het submitten van zo'n url.

[ Voor 47% gewijzigd door André op 01-03-2006 14:32 ]

[frickY]

Je kunt de waarde van een input type=file niet uitlezen of schrijven mbv javascript, omdat dit een beveiligslek zou kunnen zijn.
Wat jij wilt is niet mogelijk op deze manier. (Sinds IE5.5, als ik me niet vergis)

[ Voor 62% gewijzigd door frickY op 01-03-2006 14:30 ]

[Verwijderd]

nee, het was javascript, en wel zo ongeveer als ik heb geschreven, weet het 100% zeker

[André]

frickY schreef op woensdag 01 maart 2006 @ 14:29:
Je kunt de waarde van een input type=file niet uitlezen of schrijven mbv javascript, omdat dit een beveiligslek zou kunnen zijn.
Wat jij wilt is niet mogelijk op deze manier. (Sinds IE5.5, als ik me niet vergis)

Verwijderd schreef op woensdag 01 maart 2006 @ 14:30:
nee, het was javascript, en wel zo ongeveer als ik heb geschreven, weet het 100% zeker

Mijn voorbeeld werkt lokaal wel, misschien dat het vanaf een server niet werkt?

[ Voor 10% gewijzigd door André op 01-03-2006 14:33 ]

[XWB]

André schreef op woensdag 01 maart 2006 @ 14:29:

code:

<script type="text/javascript">
  function preview()
  {
    document.getElementById("prev").src = "file:///" + document.getElementById("picField").value;
  }
</script>
<input name="userfile" type="file" id="picField" onchange="preview()">
[img]"leeg.gif"[/img]

Bij mij werkt het met file:/// er voor wel

Gebruik je IE? In firefox werkt nl niet.

[Erkens]

André schreef op woensdag 01 maart 2006 @ 14:29:
Waarom zou dat geblocked moeten worden? Je mag toch wel weten wat op je eigen schijf staat En je bent zelf verantwoordelijk voor het submitten van zo'n url.

ehm, als een website dat kan opvragen uit welke directory ik een file selecteer, dan kan die info wellicht misbruikt worden.

stel dat ik een foto upload uit bijvoorbeeld "c:\stomme_modjes\andre.jpg" dan wil ik niet dat jij erachter kan komen uit welke directory die komt

[André]

Hmm, zo aan de reacties te zien is het een rechtenkwestie aangezien het bij mij lokaal in IE en FF prima werkt. Ik vermoedt daarom ook dat je het nooit zo kunt maken dat het bij iedereen werkt omdat dan maar net de instellingen goed moeten staan.

[Verwijderd]

ik heb het echt zien werken in IE 6,
maar even voor de duidelijkheid, je stuurt dus niks naar de server, het is onchange()
en daarnaast zie je toch ook als je een plaatje kiest de locatie staan....
dat moet je dan toch kunnen gebruiken...

[XWB]

Erkens schreef op woensdag 01 maart 2006 @ 14:40:
[...]

ehm, als een website dat kan opvragen uit welke directory ik een file selecteer, dan kan die info wellicht misbruikt worden.

stel dat ik een foto upload uit bijvoorbeeld "c:\stomme_modjes\andre.jpg" dan wil ik niet dat jij erachter kan komen uit welke directory die komt

Klinkt logisch, maar waarom zie ik dan gewoon de source als ik een document.write om document.getElementById('picField').value zet?

[Erkens]

Hacku schreef op woensdag 01 maart 2006 @ 14:47:
[...]


Klinkt logisch, maar waarom zie ik dan gewoon de source als ik een document.write om document.getElementById('picField').value zet?

idd :X

[Bosmonster]

Snap het probleem ook niet zo, ik gebruik dit regelmatig en werkt gewoon prima.

De waarde van een file input box is ook niet beveiligd en gewoon uit te lezen. Hij is alleen (uiteraard) niet te schrijven. In de fileinput staat het volledige lokale pad, wat je gewoon als img-source zou moeten kunnen gebruiken.

Voor Firefox overigens wel die file:/// ervoor toevoegen, IE kan zonder door de OS integratie gewoon lokale bestanden lezen. Werkt ook wel gewoon met trouwens, dus je hoeft geen browsercheck ofzo te gebruiken

[ Voor 27% gewijzigd door Bosmonster op 01-03-2006 15:30 ]

[XWB]

Waarom trouwens eerst een leeg plaatje zetten? Je kan ook iets als doen als dit:

JavaScript:

<script language="javascript">
function preview()
{
 var source = document.getElementById('picField').value;
 var span = document.getElementById('image');
 var img = document.createElement('img');
 img.src = source;
 span.appendChild(img);
}
</script>

<input type="file" id="picField" onchange="preview()">

<span id="image"></span>

[frickY]

André schreef op woensdag 01 maart 2006 @ 14:33:
Mijn voorbeeld werkt lokaal wel, misschien dat het vanaf een server niet werkt?

In de lokale zone werkt het inderdaad wel. Online niet

Misschien dat het wel werkt als je de enctype="multipart" uit je form-tag weg laat.. maar dan kun je het bestand ook niet uploaded (maar wordt het gelesecteerde pad als text gesubmit).

Degene die zeker weten die systeem hebben zien werken; Zeker weten dat je neit eerst alle afbeeldingen moest uploaden naar een "afbeelding bibliotheek", en hierdoor heen kon klikken en dan een preview zag? Dat is nml de meest voorkomende oplossing.

@Hacku
Omdat je dan ook weer met deleteChild moet kloten om te voorkomen dat je een rits plaatjes krijgt als je het pad een paar keer veranderd?

[ Voor 15% gewijzigd door frickY op 02-03-2006 09:46 ]

[XWB]

Hoezo kloten, 1 regeltje toevoegen

JavaScript:

function preview()
{
 var source = document.getElementById('picField').value;
 var span = document.getElementById('image');
 var img = document.createElement('img');
 img.src = source;
 while (span.hasChildNodes()) span.removeChild(span.firstChild);
 span.appendChild(img);
}