Javascript + HTML Képfeltöltés, útvonal mentése

Javascript + HTML Képfeltöltés, útvonal mentése
2020-11-25T16:05:49+01:00
2020-11-27T08:22:14+01:00
2022-10-15T21:16:30+02:00
GZolee79
Sziasztok!

Egy képfeltöltést szeretnék megoldani úgy, hogy amikor kiválasztunk egy képet akkor megvizsgálja, hogy megfelel e a követelményeknek.
A PHP részét szerintem meg tudom oldani. Viszont úgy szeretném, hogy mondjuk kiválasztunk egy képet. Javascriptből ellenőrzöm, hogy nem nagyobb e mint  a max méret. 
Ha nagyobb akkor az előzőleg kiválasztott képet tölti fel, ha nem akkor az újat,
Ehhez el akarom menteni az előzőleg kiválasztott kép nevét és ezt tenném bele az value attribútumába.
Pfuh... de nehéz megfogalmazni a problémát
Szóval röviden: Az azt szeretném megtudni, hogy hogyan lehet programból értéket adni egy input fájl mezőnek.

Így próbálkozom: Minta kód

Itt főleg a Javascriptet szeretném ha megnéznétek

input.value = temp_input_value.value;

A fenti sor nem működik, viszont jól mutatja mit szeretnék csinálni.
- Kiválasztok egy képet ami megfelel a feltételeknek.
- Ezt beírja az input mező value attribútumába
- Aztán kiválasztok egy fájlt ami nem felel meg a feltételeknek.
- Visszaállítja a fájl nevét az előzőére.
Lehet nem is elég csak egy nevet beíri, hiszen abból nem tudja, hogy hol helyezkedik el konkrétan a fájl, ugye?

Előre is köszönöm a segítséget!

Üdv: Z.
Mutasd a teljes hozzászólást!
Hali!

Valahogy ezt a memóriában kellene megcsinálni, és aztán feltölteni.
Vannak ilyen oldalak, amik ezt csinálják, csak nem jövök rá, hogyan :)

1. Betöltöd a képet FileReader segítségével (célszerű előtte vizsgálni, hogy kép a kiválasztott fájl).
2. Átméretezed canvas-szel (ahogy' pookie2 utalt rá): a betöltött képet (egy dinamikusan létrehozott Image objektumba rakva a FileReader eredményét) a megfelelő méretű canvas-re rajzolod.
3. A canvas tartalmát Blob-bá alakítod: toBlob().
4. A form-ból törlöd az fájl-mezőt (persze, előtte a kép adatait, neve, stb. elmented) – vagy eleve a form-on kívül hozod létre. A form adatait összegyűjtöd egy FormData-ba (ha „kézzel” gyűjtöd össze a form elemeit ebbe, akkor az előző mondatban leírtak nem érdekesek), majd ehhez hozzáfűzöd – append() – az előbb létrehozott blob-ot.
5. Post-olod a FormData-t.

Mutasd a teljes hozzászólást!

  • Szóval röviden: Az azt szeretném megtudni, hogy hogyan lehet programból értéket adni egy input fájl mezőnek.

    A válasz röviden: sehogy (és ez így van jól).
    Mutasd a teljes hozzászólást!
  • Ok.
    Értem.
    És azt meg lehet oldani,  hogy csak akkor változzon az input mező értéke,  ha a fájl megfelel a követelményeknek? 
    Akkor nem én írom bele,  csak nem hagyom módosulni ?
    Mutasd a teljes hozzászólást!
  • Az előbb nem voltam egészen pontos.
    Módosíthatod a value-t, de az sosem lesz "valid path" a kliens fájlrendszerében.
    Reset-elni (value = "") szerintem lehet, tehát ha mondjuk change eseményre megvizsgálod a méretet, és, ha nem jó, akkor kiüríted... ez talán működhet (most nem tudom kipróbálni).
    Mutasd a teljes hozzászólást!
  • Igen,  a példámban pont ezt csonálom,  ez működik is ?. 
    Viszont később azt szeretném csinálni,  hogy ha nsgyobb a kép akkor először átméretezem és utána töltöm fel. 
    A max feltölthető méretet lekérdezem a szerverről. 
    Php-val azért nem megy,  mert ha nagyobb akkor már a tmp könytárba sem kerül be,  így nem tudom átméretezni. 
    Tehát marad a javascript... 
    Valahogy ezt a memóriában kellene megcsinálni,  és aztán feltölteni.
    Vannak ilyen oldalak,  amik ezt csinálják,  csak nem jövök rá,  hogyan :)
    Mutasd a teljes hozzászólást!
  • Nem vagyok kliens-oldali mágus... az átméretezést szerintem canvas-szal meg lehet oldani, utána pedig a feltöltés mehetne mondjuk base64 encode-olt formában (így nem kell file inputot birizgálni).
    Lehet, hogy van okosabb megoldás, várj még, hátha csatlakozik a topcihoz valaki, aki jártasabb a témában!
    Mutasd a teljes hozzászólást!
  • Ezt így ebben a formában dehogy, szerencsére. Szép is lenne hogy majd te döntöd el milyen  fájlt válassz ki a kliens oldali fájlrendszeren...

    Én így csinálnám: user kiválasztja a képet, ha jó, megyünk tovább. Azt az input-ot amiben a jó fájl van elrejteném, és egy másikat mutatnék neki a következő fájl kiválasztásához. Ha a kiválasztott érték nem jó, az előző input-om még érintetlen.
    Mutasd a teljes hozzászólást!
  • Hali!

    Valahogy ezt a memóriában kellene megcsinálni, és aztán feltölteni.
    Vannak ilyen oldalak, amik ezt csinálják, csak nem jövök rá, hogyan :)

    1. Betöltöd a képet FileReader segítségével (célszerű előtte vizsgálni, hogy kép a kiválasztott fájl).
    2. Átméretezed canvas-szel (ahogy' pookie2 utalt rá): a betöltött képet (egy dinamikusan létrehozott Image objektumba rakva a FileReader eredményét) a megfelelő méretű canvas-re rajzolod.
    3. A canvas tartalmát Blob-bá alakítod: toBlob().
    4. A form-ból törlöd az fájl-mezőt (persze, előtte a kép adatait, neve, stb. elmented) – vagy eleve a form-on kívül hozod létre. A form adatait összegyűjtöd egy FormData-ba (ha „kézzel” gyűjtöd össze a form elemeit ebbe, akkor az előző mondatban leírtak nem érdekesek), majd ehhez hozzáfűzöd – append() – az előbb létrehozott blob-ot.
    5. Post-olod a FormData-t.

    Mutasd a teljes hozzászólást!
  • Hali!

    Köszi!

    Éppen most megyek végig az általad javasolt lépéseken.
    Eddig a Blobbá alakításig jutottam. Remélem a Formdatába csatolás és a Postolás is menni fog :)

    Még azt is  meg akarom oldani, amit DJ_Tracee javasolt, azaz, hogy hiba esetén lecserélem az input mezőt...
    Mutasd a teljes hozzászólást!
  • És biztos vagy abban, hogy ez egy hasznos és használható fejlesztés lesz?
    1. Mi van, ha nincs "első kép", hanem rögtön egy túl naggyal próbálkozom?
    2. Mi van, ha elsőre tévedésből a barátnőm intim képei között matatok, majd megnyitom a helyes mappát, kiválasztok egy túl nagy képet és avval próbálkozom? Szó nélkül feltölti a csajom puncis képét???
    Azért gondolkozzunk már, mielőtt programozni kezdünk...
    Mutasd a teljes hozzászólást!
  • Szia, tessék

    File API - JSFiddle - Code Playground

    beforeSend: function() { console.log('Before Send Function Upload | Preparing upload.'); $.each(files,function (key, value) { formData.append('files[]',value); }); },
    A beforeSend tehát a küldés előtt rakja be a fileokat a formData-ba. A többivel ne foglalkozzál mert úgy rémlik, hogy olyat csináltam, hogy behúztam a fájlokat és adtam checkbox-ot és amelyikben pipa volt azokat töltötte fel. Lehet megvan a php oldal. Régi szép php idők.
    Mutasd a teljes hozzászólást!
  • Nyilván gondoltam erre! 

    Lesz minden képről egy gyorsnézet,  így a felhasználó látja feltölés előtt mit tölt fel :) 
    Most nem akartam mindenre rákérdezni,  csak ami nem megy...
    Mutasd a teljes hozzászólást!
  • 2. Mi van, ha elsőre tévedésből a barátnőm intim képei között matatok, majd megnyitom a helyes mappát, kiválasztok egy túl nagy képet és avval próbálkozom? Szó nélkül feltölti a csajom puncis képét???

    Kit érdekel? Ez miért a programozó / weboldal üzemeltető hibája? Ha te feltöltésre kitallóztál egy fájlt a gépedről, akkor azért csak és kizárólag Te felelsz. Rengeteg weboldal működik így, hogy aszinkron tölti is már fel a kitallózott fájlt. Csak azt a fájlt, amihez a felhasználó hozzáférést adott.
    Mutasd a teljes hozzászólást!
  • Hali!

    Még azt is meg akarom oldani, amit DJ_Tracee javasolt, azaz, hogy hiba esetén lecserélem az input mezőt...

    Lehet, hogy csak nem látom a fától az erdőt, de egyáltalán nem értem, hogy erre miért van szükség. Ha jól értelmezem a problémádat (javíts ki, ha nem), akkor a felhasználó kiválaszt egy képet, ennek a méretét megvizsgálod (még kliens oldalon, feltöltés nélkül), és ha nem megfelelő, akkor „nullázod” a file input-ot (ha pedig megfelelő a kép, akkor rárajzolod a canvas-ra, majd feltöltéskor hozzácsapod azt a FormData-hoz). Miért kellene lecserélni a file input-ot?

    Mutasd a teljes hozzászólást!
  • hát az tuti, hogy én abban a pillanatban bezárnám a böngészőt és soha többet nem tévednék erre a bizonyos oldalra
    Mutasd a teljes hozzászólást!
  • Jó, hát részemről ok, de nem igazán értem akkor sem, hogy ez mire jó. Annyira kritikus az esetleg kárba vesző adatforgalom?  A php fájl feltöltése valóban nem egy svájci óra, de legalább egyszerű, mint a faék.
    Mutasd a teljes hozzászólást!
  • Igazából azért (lehet,  hogy túlgondolom),  mert ha mondjuk a felhasználó kiválaszt egy képet ami jó,  ezt rárajzolja a canvasra.
    Ezután meggondolja magát, még mielőtt feltöltené,  és kiválaszt egy másik képet,  aminek nem jó a mérete. 
    Azt szeretném,  hogy ilyenkor maradjon meg az előzö valid kép... 
    Csak próbálok felhasználói szemmel mindenre gondolni. 
    Lehet,  hogy tényleg túlagyalom... 
    Mutasd a teljes hozzászólást!
  • Szia!

    Köszi!
    Ez még jól jöhet!
    Át fogom nézni tüzetesen. A következő funkció úgyis a drag and drop lenne :)
    De fel is kell először fognom.
    Egyelőre az eredeti gondolatmenetemen akarok végigmenni. :
    Mutasd a teljes hozzászólást!
  • Nem az adatforgalom miatt.
    Igazából én a felhasználó szemszögéből próbáltam mindenre gondolni.
    Pl. ha választ egy képet ami valid, de meggondolja magát és ezután véletlenül rossz képet választ (Pl túl nagy), akkor maradjon az előzőleg kiválasztott kép és ne üresre álljon vissza.
    Persze nem biztos, hogy jó a gondolatmenetem...

    2. Mi van, ha elsőre tévedésből a barátnőm intim képei között matatok, majd megnyitom a helyes mappát, kiválasztok egy túl nagy képet és avval próbálkozom? Szó nélkül feltölti a csajom puncis képét???

    Építek be punciszűrőt is!
    Mutasd a teljes hozzászólást!
  • hát az tuti, hogy én abban a pillanatban bezárnám a böngészőt és soha többet nem tévednék erre a bizonyos oldalra

    Van Facebook profil oldalad? Na, csak egyet említettem a legnagyobbak közül...
    Mutasd a teljes hozzászólást!
  • Hali!

    Igazából azért (lehet, hogy túlgondolom), mert ha mondjuk a felhasználó kiválaszt egy képet ami jó, ezt rárajzolja a canvasra.
    Ezután meggondolja magát, még mielőtt feltöltené, és kiválaszt egy másik képet, aminek nem jó a mérete.
    Azt szeretném, hogy ilyenkor maradjon meg az előzö valid kép...

    OK, értem. Viszont, ebben az esetben sincs szükség erre, hiszen ha nem jó a mérete, akkor már rá sem kerül a canvas-ra:
    1. A file input (on)change esemény-kezelőjében létrehozol egy FileReader-objektumot, és azzal beolvastatod a kiválasztott fájlt (képet) – readAsDataURL().
    2. A FileReader (on)load esemény-kezelőjében létrehozol egy kép-objektumot és értékül adod neki a fájlbeolvasás eredményét – result.
    3. A kép (on)load esemény-kezelőjében elvégzed a méret-ellenőrzést. Ha megfelelő, akkor rárajzolod a canvas-ra a képet (persze, az új méreteket és pozíciót a canvas-on belül kiszámolva) – drawImage(). Ha nem volt megfelelő a méret, akkor nem csinálsz semmit, az előző kép van a canvas-on.
    4. A file input-ot reset-eled („tuti, ami tuti” ): értékének null-t vagy üres sztringet adsz.

    Összedobtam egy példát (csak a kép betöltésére, átméretezésére, canvas-ra rajzolására), működés közben megnézheted itt: JSFiddle.

    A kép nem továbbítódik a szerverre (csak tényleges post-kor), a canvas-on mindig a legutolsó érvényes kép marad. Mivel úgysem a form-ot küldöd el közvetlenül (főleg nem a file-mezőt), így nem kell elpusztítanod a file-mezőt és újat sem kell létrehoznod.

    Mutasd a teljes hozzászólást!
  • Hali!

    Köszi!

    Azt hiszem minden kérdésemre megkaptam a választ a témával kapcsolatban.
    A példád a JSFiddle-n is nagyon hasznos.

    Az, hogy minden sorát megértsem kicsit több időt vesz igénybe, de szerintem menni fog.
    Még a Blob fájlok átadása a Formdatának, aztán ennek elküldése a POST-tal...

    De a megoldásod szerint meg fogom tudom  csinálni.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd