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
109
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
Nurmossa kuoli 2 Lasta..
Autokolarissa. Näin kertovat iltapäivälehdet juuri nyt. 22.11. Ja aina ennen Joulua näitä tulee. . .894600Maisa on SALAKUVATTU huumepoliisinsa kanssa!
https://www.seiska.fi/vain-seiskassa/ensimmainen-yhteiskuva-maisa-torpan-ja-poliisikullan-lahiorakkaus-roihuaa/15256631403133Vanhalle ukon rähjälle
Satutit mua niin paljon kun erottiin. Oletko todella niin itsekäs että kuvittelet että huolisin sut kaiken tapahtuneen503125Mikko Koivu yrittää pestä mustan valkoiseksi
Ilmeisesti huomannut, että Helenan tukijoukot kasvaa kasvamistaan. Riistakamera paljasti hiljattain kylmän totuuden Mi4032202Purra hermostui A-studiossa
Purra huusi ja tärisi A-studiossa 21.11.-24. Ei kykene asialliseen keskusteluun.2311348Ensitreffit Hai rehellisenä - Tämä intiimiyden muoto puuttui suhteesta Annan kanssa: "Meillä ei..."
Hai ja Anna eivät jatkaneet avioliittoaan Ensitreffit-sarjassa. Olisiko mielestäsi tällä parilla ollut mahdollisuus aito111223- 761207
- 671097
Joel Harkimo seuraa Martina Aitolehden jalanjälkiä!
Oho, aikamoinen yllätys, että Joel Jolle Harkimo on lähtenyt Iholla-ohjelmaan. Tässähän hän seuraa mm. Martina Aitolehde301084Miksi pankkitunnuksilla kaikkialle
Miksi rahaliikenteen palveluiden tunnukset vaaditaan miltei kaikkeen yleiseen asiointiin Suomessa? Kenen etu on se, että112999