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
Ampuminen kylpylässä
Onko vornasen timbe käynyt hiukan kylpemässä vai mikä tämä ampumatapaus on kylpylässä? Tuntuu aika villi meno olevan naa751679- 241186
Kemijärvellä vesionnettomuus
Pitkänsillan ja taiteilijanniemen välillä nähty henkilön painuvan veden alle. Mitä on tapahtunut? Onko vesihiisi taas as321083Hei, voitko kuunnella
Voisitko auttaa minua selvittämään asioita? En halua ajaa sinua hulluuteen kanssani, en sitoa sinua, en esittää vaatimu134916Joku porukka lähtenyt täältä
Ihmeen hiljainen on palsta nyt. Yleensä tänne tulvii aloituksia yms, mutta nyt on kyllä erikoisen hiljaista.189826- 64694
Olipa yllätys
Kuten hyvin moni tiesi/arvasi että valetta alusta loppuun toi *olemme ystäviä* satu. Instassaan käsi kädessä kuva kertoo192619On todella ikävää
Todella ikävää, että asiat ovat menneet tällaisiksi. Tämä ei ollut missään vaiheessa tarkoitukseni. Olen tehnyt virheit79598- 49571
- 71567
Se kun olit pitkästä aikaa silmieni edessä
Oli kyllä sykähdyttävää. Tiedätkö, mikä laittaa minut ikävöimään sinua? Kun palautan mieleeni valtavan ihanan olemuksen,32518- 55517
- 57485
Oletteko koskaan torjuneet kaivattuanne?
Minä olen, kun en silloin tajunnut vielä ihastuneeni. Yritin paikata tapahtunutta, mutta ei onnistunut enää.25457- 34434
Kai sä mies ymmärrät..
..ettet jättänyt vaihtoahtoa. Tottakai toivon vielä, että pystyisit toimimaan niin että asiat korjaantuisivat. Vahvast28432- 33423
- 40417
- 16409
- 82398