Tarkoitus olisi saada käyttäjän valitsemaan omalta koneelta kuva, joka näytettäisiin sivulla.
Kuvan voi valita input-elementillä asettamalla type imageksi.
<input ref="fileList" type="file" accept="image/*"/>
Tuo tekee sivulle valintanappulan, joka aukaisee kuvatiedostojen valintaikkunan. Tiedostolistaus löytyy valinnan jälkeen elementin .files:stä, eli .files[0] on ensimmäinen tiedosto (tai tässä tapauksessa ainoa) jne.
Tarkoitus olisi sitten laittaa kohde-elementin .src:hen tiedostonimi polkuineen, mutta polkuna on "C:\fakepath", kun käyttää elementin value:ta. Tiedosto-objektissa taas ei ole kuin
lastModified: 1519296733000
name: "testikuva.jpg"
size: 27033
type: "image/jpeg"
webkitRelativePath: ""
On ilmeisesti joku tietoturvasyy miksi polku on piilotettu, mutta tässä tapauksessa kuvaa ei olla lähettämässä (upload) mihinkään, vaan pelkästään näytettäisiin se nettisivulla. Milläköhän tavalla saisi tuon polun selville?
Paikallisen kuvan lataaminen sivulle, polun selvittäminen
6
302
Vastaukset 6
- Anonyymi
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="utf-8" />
<title>Esimerkki</title>
<script type='text/javascript'>
function NäytäKuva(event)
{
var reader = new FileReader();
reader.onload = function()
{
var output = document.getElementById('Kuva');
output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
</script>
</head>
<body>
<input type="file" accept="image/*" onchange="NäytäKuva(event)">
<br>
<img id="Kuva"/>
</body>
</html>- Anonyymi
Tattis, tuota FileReaderia käyttäen sain toimimaan.
- Anonyymi
Anonyymi kirjoitti:
Tattis, tuota FileReaderia käyttäen sain toimimaan.
Kännykässä näköjään Firefox Focus ei suostu näyttämään kuvaa, mutta Edge näyttää.
- Anonyymi
Mikään skripti ei pääse käsiksi dataan joka on eri lähteessä: https://en.wikipedia.org/wiki/Same-origin_policy
Eli nettisivusi olisi sitten myös siellä "koneella" missä kuva valitaan. Eli HTTP palvelimella jako missä on se nettisivu ja kuvat niin sitten siellä voi valita.- Anonyymi
Tämä on toinen tapa: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
- Anonyymi
Juu, CORS-hässäkkä on tuttu. Tuossa vaan kokeilin Vuessa tehdä komponenttia, johon voi valita näkyvän kuvan paikallisesti. Aloitukseni otsikko oli sikäli harhaanjohtava, kun ei mitään varsinaisesti ladata, vaan pelkästään laitetaan img:n src:ksi valitun kuvan polku.
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Viesti sinulle
Tiedät että tunteet ja ajatukset ja meillä on vahva yhteys mistä molemmat tiedetään. Odotan sinua ☀️481042Mikä on totta mikä ei?
Onko juoru vai ei että nimeltä mainitsematon henkilö on tehnyt naiselle/naisille jotain joka on väärin?17989- 82841
Mitä sinulle on tapahtunut lapsena
Kun olet noin sairas päästäsi? Pikkupojalle ( Miehen kehossa)80759Haluan purkaa vielä tuntemuksia
Tykkään sinusta kovin paljon❤️ olen surullinen tilanteestasi ja siitä mitä me olemme yhdessä joutuneet kokemaan. Tämä ei21737- 59631
Tunteiden käsittely kertoo ihmisestä.
Kun puhutaan "tavallisesta" ihmisestä, joka on suht tasapainoinen eläjä, niin puhutaan oikeastaan taitavasta tunteiden k204627- 102604
Persujen Puhoksen retki
Perussuomalaiset olivat tehneet turistibussimatkan Puhokseen. Tosin raukat olivat niin peloissaan, etteivät uskaltaneet188582- 93551
Jopa poliisi nauraa paskaista pelkuripersuille
Puhoksessa jäi "isänmaantoivot" bussiin vapisemaan :-D https://www.is.fi/politiikka/art-2000012319632.html260481Pilkettä sunnuntain silmässä
😉 Jos tästä ketjusta löytyisi yksi ihminen, joka saisi sut hymyilemään tänään… Millainen hän olisi? Ei tarvitse kerto73461Just saying
Mies joka antaa naiselle turvallisen olon, on seksikäs. Ei kieroja kikkoja ja haluaa olla vain sen yhden naisen mies.85448- 39424
Aika on tuonut järkeä
Sä et tiedä musta kaikkea. Jos tietäisit, ymmärtäisit, miksi me ei sovita yhteen. Öljy ja vesi. En mä ole valehdellut,42403- 46385
- 29385
- 5378
Persut eivät uskaltaneet tulla ulos
Bussiin jäivät https://www.iltalehti.fi/politiikka/a/d7f9fc57-dca0-40b8-9cb1-156e5872dba9142376- 29348