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
234
Vastaukset
- 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
SDP jo 100 % suositumpi kuin persut
Kertoo Hesarin uusin kannatuskysely. Demareiden kannatus on miltei tuplat verrattuna persuihinl. Suomen kansa ei selväst15311018Ikävä sinua mies
Vuosia kuluu, mutta tunteet ei ole hävinnyt. Tasoittuneet toki, kun ei olla nähty. Järki palannut päähän kuitenkin. Se i474255Mikä tämä henkilö mahtaa touhuta Parkanossa
Kamalaa https://www.ylasatakunta.fi/teksti/pirkanmaan-karajaoikeus-vangitsi-koiran-tappamisesta-epaillyn-6.68.127794.b58643988Orpo: Velkajarrua vastustavaa puoluetta vaikea ajatella hallitukseen
No Minja Koskelan kommunistipuolue jäi ulos tuosta. Kaikki eduskuntapuolueet vasemmistoliittoa lukuun ottamatta sopivat1953653PS ylivoimainen nousija myös HS:n gallupissa, SDP laskee taas
https://www.verkkouutiset.fi/a/hs-gallup-sdpn-suosio-laskee-ps-nousussa/#0a7d2507 Ylivoimainen viime kuukausien nousija1013476Valtavasti suomalaisia asunnottomina, mutta ei yhtään somalia
tai muuta kehitysmaalaista. Mites tässä näin kävi? Tiedän hyvin, että esim. somaleita lentää ulos mm. Hekan asunnoista,1013330Hienoa! Eduskunta luopui käteisen käytöstä
Nyt tuo sama muutos pitää saada myös muuhun yhteiskuntaan. Käteistähän ei tarvitse tänä päivänä enää kuin rikolliset.731980Maajussi-Ville herättää kysymyksiä - Etsiikö oikeasti rakkautta vai mainostaako oliiviöljyä?
Mitä mieltä olet: etsiikö Ville rakkautta vai mainostaako oliiviöljyään? Maajussille morsian -ohjelmassa yksi maajusseis161295Kovia syytöksiä Stefan Thermaninsta.
Jättänyt taas maksamatta kohuliikemies, hupparit ja muita ostamiaan tavaroita. On soiteltu liikkeestä ja Stefan iskenyt155988Totuuspuolueen johtaja Jaana "prinsessa Leia" Kavonius on vangittu
Kavonius määrättiin jo keväällä 2024 poissaolevana vangittavaksi todennäköisin syin epäiltynä 13 vainoamisesta ja 24 kun268944