Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[JavaScript] Lokale foto tonen zonder upload

Anoniem
Buur
6 antwoorden
  • Ik heb een pagina waarbij mensen een foto kunnen uploaden, maar ik wil daabij een thumbnail of voorbeeldje laten zien van de foto die ze hebben uitgekozen, zonder dat de foto al is geupload. Het probleem is dat ik moet weten waar de foto vandaan komt. Dit is het idee:[code:1:a95d5a3b90]<form name="fotoupload">
    <input type="file" name="userfoto" onChange="document['voorbeeld'].src
    = document.fotoupload.userfoto.value;" />
    </form>
    <img src="leeg.jpg" name="voorbeeld" />[/code:1:a95d5a3b90]Als ik dit lokaal test, en ik selecteer een afbeelding die in dezelfde directory staat, dan werkt dit prima. Als de foto in een andere dir staat, werkt dit niet (omdat userfoto.value alleen de filenaam bevat, en niet het volledige pad).

    Is er een manier om er achter te komen waar de foto staat die de bezoeker heeft geselecteerd?
  • Bij mij in Firefox (4) zie ik bij value wel het volledige path?

    Ook bij baseURI staat het volledige path aangegeven.
  • Dus alert(document.fotoupload.userfoto.value) geeft bij jou het volledige pad? Bij mij slechts de filename + extension (FF 3.6)… Hoe kom je aan baseURI? Is dat niet een variabele in de $_FILES array? Die kun je toch alleen met PHP aanroepen… Ik wil mijn preview tonen voordat het plaatje geupload is… Of is er een mogelijkheid om baseURI in een JavaScript variabele te krijgen?
  • EDIT: Ik heb het getest met firebug, daar staat de hele waarde. Alert geeft mij ook alleen de file naam. Dat is uiterst merkwaardig, moment ik kijk even.

    p.s: BaseURI was van de html file zelf, ik keek niet goed.

    EDIT2: Oke even snel gezocht en je hebt inderdaad gelijk. Het schijnt een security ding te zijn van firefox, maar ook Chrome heeft dit gedrag. IE8 doet het wel netjes. (http://stackoverflow.com/questions/81180/how-to-get-the-file-path-from-html-input-form-in-firefox-3)

    Ik zou even kijken naar de reacties onder het correct antwoord. Daar heeft iemand het voor elkaar gekregen voor precies het gene wat jij wilt (Christopher Parker heet ie) Ga je daar uit komen?

    EDIT3: De link werkt niet meer en op alle andere forums die ik tegenkom zegt men dat het niet kan. Ik ben bang dat het heel moeilijk gaat worden. Het klonk als een simpel probleem. Een beetje gek dat ze dit voor security reasons dicht getimmerd hebben.
  • Dit kan idd niet. Stel je voor dat javascript op je PC kan kijken?

    Toch alvast uploaden en via ajax een thumb laten zien?
  • Is er in HTML5 wellicht een mogelijkheid?

    Uit een draadje op pfz.nl:
    [quote:0aa2e82bc1]HTML5 LocalStorage werkt alleen met strings.
    Als het om een image gaat, zou je hem kunnen converten naar base64, en dan later doorsturen.
    Het is wel een intensief proces, dus ideaal is het niet[/quote:0aa2e82bc1]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.