Kép típus ellenőrzése javascript

Kép típus ellenőrzése javascript
2013-03-26T16:07:22+01:00
2013-03-28T08:47:22+01:00
2022-11-28T15:41:56+01:00
juhostt1
Sziasztok!

Adott egy képfeltöltő script, amelybe szeretném beépíteni, a kép mime típus ellenőrzést is.
Az engedélyezett mime típusokat php-ból kapja meg a js string-ként, amelyet js-ben feldarabolok.
Viszont azt nem sikerül megoldani, hogy ellenőríztessem a kép-ek mime típusát.


... var jtomb = new Array(); jtomb = jokep.split(","); // a mime típusok tömbbé alakítása for (var i = 0; i < input.files.length; i++) { var l2 = document.createElement('span'); var n=maxkep*1024*1024; var kepmeret=Math.round((input.files[i].size /1024/1024)*100)/100 // képméret elleneőrzés l2.setAttribute('id', i); //itt próbáltam a mime típust ellenőrízni for (var ii = 0; ii < jtomb.length; ii++) // mime típus ellenőrzés { if (jtomb[ii] == input.files[i].type || input.files[i].size > n) { l2.innerHTML = '<a href=#><img title="Bezárás" id="kepbezar" onclick="kep_torol('+i+')" src=kep/kep_eltav.png ></a> <span id="keptajek">'+input.files[i].name + ' Mérete túl nagy: '+kepmeret+' MB</span><br />'; } else{ l2.innerHTML = '<a href=#>'+jtomb[i] +'<img title="Bezárás" id="kepbezar" onclick="kep_torol('+i+')" src=kep/kep_eltav.png ></a> '+input.files[i].name + ' leírása: <input type="text" name='+i+' /><br />'; } } ul.appendChild(l2); }

Amit szerettem volna: For ciklussal végigmegyek az engedélyezett elemeken, majd vizsgáltatom a kép mime típusát. (Ezen kívül a méretet is ellenőrzöm, az működik)
A mime ellenőrzésnél próbáltam a következőket:
if (jtomb[i] != input.files[i].type || input.files[i].size > n)
Ekkor csak a mime-ket tartalmazó tömb első elemét nézi: elem1

if (jtomb != input.files[i].type || input.files[i].size > n)
Ekkor az összes elemet egybevéve nézi: elem0,elem1,elem2

Hogyan lehetne megoldani, hogy a képet megnézze az összes elemmel, és ha egyezés van akkor a feltétel igaz ága fusson, ha nincs egyezés akkor a feltétel else ága fusson le.

Remélem érthető mi a probléma.
Előre is köszönöm a segítséget!
Mutasd a teljes hozzászólást!
De most ne a miérteken akadjunk fel, hanem próbáljuk megoldani a problémát


Ha rosszul fogalmazod meg a kérdéseidet, akkor nem kapsz megfelelő választ. Ezt már igazán megtanulhattad volna itt a prog.hu-n!


for (var i = 0; i < input.files.length; i++) { var ok = 0; for (var ii = 0; ii < jtomb.length; ii++) { if (jtomb[i] == input.files[i].type) ok = 1; else ok = 0; }

A fenti kóddal az az egyik gond, hogy a belső ciklusban csak i index szerepel, nem ii:
if (jtomb[ii] == input.files[i].type)

A másik gond az, hogy az ok értékét az utolsó ellenőrzött file, utolsó ellenőrzött típusa fogja meghatározni így. A belső ciklusból azonnal ki kell lépni, ha egyezést talál. A külső ciklusból vagy ki kell lépned azonnal, ha a belső ciklus eredménye ok=0, vagy pedig tömb szerűen tárolnod kell, hogy mely file-ok okék és melyek nem egy tömbben.
Mutasd a teljes hozzászólást!

  • És ha ezen végigmenél egy for ciklussal?

    if (jtomb[i] != input.files[i].type || input.files[i].size > n)
    Mutasd a teljes hozzászólást!
  • for (var ii = 0; ii < jtomb.length; ii++)

    Ez lett volna a kísérlet rá. Ebben fut le a feltétel is.
    Viszont ha így írom: jtomb[ii] akkor "üres" értéket dob vissza a js.

    Ha így jtomb akkor csak az első elemet.

    Mutasd a teljes hozzászólást!
  • Szerintem a for ciklusban csak azt kéne vizsgálnod, hogy a mime típus benne van -e az engedélyezett típusokban. Ha igen akkor egy változót 0-ról 1 re állítasz.

    És a végén máris tudod hogy ok vagy sem.
    Mutasd a teljes hozzászólást!
  • És ha nem jut eszébe, hogy a "egy változót" változót definiálja a ciklus előtt például 0 értékkel és a ciklus után vizsgálja meg, hogy 1 lett-e?...
    ****************
    Inkább egy kész kódot kellet volna adnod... Vagy még sem?...
    ****************
    Mutasd a teljes hozzászólást!
  • Attól hogy kiveszem a méret ellenőrzést még ugyanígy fog viselkedni a script ezen része. Szóval nem megy végig egyesével.
    Valahogy így kellene elméletben csinálnia:
    file1 mime/jpg a tömbben pedig: mime/jpg,mime/png. Mivel jpg, így engedi.
    file2 mime/jpg a tömbben pedig: mime/jpg,mime/png. Mivel jpg, így engedi
    file3 mime/gif a tömbben pedig: mime/jpg,mime/png. Mivel gif, így
    nem engedi

    Az a baj, hogy a tömbbön nem megy végig úgy ahogy szeretném. Valamit valahol elrontottam, csak nem tudok rájönni, hogy hol és mit.
    Mutasd a teljes hozzászólást!
  • Próbálkozhatsz egy ilyennel is.
    Link
    Mutasd a teljes hozzászólást!
  • Ha már html5-öt használsz, akkor miért nem a file vezérlő accept tulajdonságában adod meg a feltölthető file-ok mime típusát?

    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

    De én ezt a validálást biztosan szerver oldalon végezném el a feltöltött file ismeretében (hacsak nem akarod kliens oldalon getData()-val a file-ok fejléceit nézegetni).
    Mutasd a teljes hozzászólást!
  • Szerver oldalon is nézem, ez csak előzetes lenne.
    Az engedélyezett típusok mysql-ben vannak, onnan kérem le és küldöm el a script-nek.
    Mutasd a teljes hozzászólást!
  • Nem copy/paste kódot kértem, csak vmi elvi segítséget hogy megoldjam.


    a "egy változót" változót definiálja a ciklus előtt például 0 értékkel és a ciklus után vizsgálja meg, hogy 1 lett-e?


    Ez nem teljesen világos. Akkor állítsam a változót 1-re ha a feltétel teljesül? De a gond az, hogy a cikluson belül nem megy vévig az elemeken.


    for (var ii = 0; ii < jtomb.length; ii++) { ebben végzem a vizsgálatot: if (jtomb[i] != input.files[i].type) // ha a jtomb[ii] akkor üres értéket kapok. }
    Mutasd a teljes hozzászólást!
  • Az engedélyezett típusok mysql-ben vannak, onnan kérem le és küldöm el a script-nek.


    Ezt akár a file vezérlő accept paraméterébe is be tudnád tenni...
    Mutasd a teljes hozzászólást!

  • var mehet_e_a_formatum = 0; /HA 0 akkor tilos for (var ii = 0; ii < jtomb.length; ii++) { if (jtomb[i] == input.files[i].type){ mehet_e_a_formatum = 1; } } if(mehet_e_a_formatum == 1){ //akkor feldolgozzuk }else{ //nem jó a formátum }
    Mutasd a teljes hozzászólást!
  • Bár azt nem írtad miért akarod ellenőrizni, de ha csak képet akarsz engedélyezni, akkor
    <input type="file" id="fileselect" name="fileselect[]" accept="image/*" multiple="multiple" />
    minek a JS-ellenőrzés, ahogy Árnyék is írta...
    Szerver oldalon meg csak akkor kell a kép típusának vizsgálata, ha át akarod méretezni, akkor meg ott a
    list($width, $height, $type, $attr)= getimagesize($image_path);
    megoldás -> LINK...
    Mutasd a teljes hozzászólást!
  • Ez jó is lenne, ha nem csak az első képet vizsgálná meg.
    Ha az első kép nem engedélyezett, vagyis a valt = 1, akkor az összes-re 1-et fog nézni vagyis egy képet se enged feltölteni. Valahogy vissza kellene állítani 0-ra, a következő képhez.

    for (var i = 0; i < input.files.length; i++) { var ok = 0; for (var ii = 0; ii < jtomb.length; ii++) { if (jtomb[i] == input.files[i].type) ok = 1; else ok = 0; }
    Mutasd a teljes hozzászólást!
  • A régi böngészők nem támogatják az accept-et, így az felejtős. No meg bírja, a file választásakor hogy *.* és már megint felejtős. Ez egy picikét jobbnak tűnik.

    Meg amúgy is jó lenne ha megtudnám csinálni, mert később a tudást másra is használni tudom
    Mutasd a teljes hozzászólást!
  • Ez az egész fenti kód felejtős IE8 alatt, hiszen ott files gyűjtemény sincs, ahogy azt már benken meg is írta neked egy másik témában.
    Mutasd a teljes hozzászólást!
  • Hmm tényleg így van. De most ne a miérteken akadjunk fel, hanem próbáljuk megoldani a problémát
    Most se copy/paste kódot kérek, csak azt, hogy segítsetek hogy mi lehet a gond ennél az ellenőrzésnél.
    Szóval összegezve:
    A woodooman féle script esetén csak az első filet nézi meg. Ha nem így lenne, akkor már az én scriptem is működne, és a témát se nyitottam volna meg.
    De mivel egyszerre kijelölhet több filet, így mindet meg kell vizsgálni.
    Mutasd a teljes hozzászólást!
  • De most ne a miérteken akadjunk fel, hanem próbáljuk megoldani a problémát


    Ha rosszul fogalmazod meg a kérdéseidet, akkor nem kapsz megfelelő választ. Ezt már igazán megtanulhattad volna itt a prog.hu-n!


    for (var i = 0; i < input.files.length; i++) { var ok = 0; for (var ii = 0; ii < jtomb.length; ii++) { if (jtomb[i] == input.files[i].type) ok = 1; else ok = 0; }

    A fenti kóddal az az egyik gond, hogy a belső ciklusban csak i index szerepel, nem ii:
    if (jtomb[ii] == input.files[i].type)

    A másik gond az, hogy az ok értékét az utolsó ellenőrzött file, utolsó ellenőrzött típusa fogja meghatározni így. A belső ciklusból azonnal ki kell lépni, ha egyezést talál. A külső ciklusból vagy ki kell lépned azonnal, ha a belső ciklus eredménye ok=0, vagy pedig tömb szerűen tárolnod kell, hogy mely file-ok okék és melyek nem egy tömbben.
    Mutasd a teljes hozzászólást!
  • Na megoldás az volt, hogy valóban időben kilépjek a ciklusból. Tökéletesen megy, köszönöm!



    OFF:
    Viszont nem értem mit fogalmaztam meg rosszul? Elég szájbarágósan leírtam mi a gond, mivel próbálkoztam, mire milyen eredményt kaptam. Kezem úgy érezni, hogy a túl gyakran feltett kérdéseim szúrják egyesek szemét, mivel olvasgatok más témákat is, ahol ténylegesen csak a kunyerálás folyik, és ott nagyobb a segítő szándék.
    Mutasd a teljes hozzászólást!
  • Viszont nem értem mit fogalmaztam meg rosszul?


    Ebben a példában pl. IE8 vs. files gyűjtemény vs. accept tulajdonság.

    De szinte kivétel nélkül minden témádban elégtelen mennyiségű információt adsz meg, ráadásul zavarosan fogalmazol. Mindez eléggé frusztráló a neked segítők számára, hiszen még azt is ki kell találni, hogy mi is pontosan a kérdés, aztán kihúzni belőled harapófogóval a hiányzó információkat és csak utána lehet érdemben a kérdés megválaszolására koncentrálni!
    Mutasd a teljes hozzászólást!
  • Igaz zárás után, DE...
    ****************************
    Mivel még mindig tisztázatlan számomra, hogy miért JS-el akarod a PHP-tól kapott adatokkal ellenőrizni a kép típusát, ezért adok néhány feltöltő megoldást:
    LINK1
    LINK2
    LINK3
    és mindegyiknél letölthető a forráskód...
    *****************************
    Ha megnézed/megérted a forrásokban lévőket, akkor legközelebb tisztább lesz a kérdésed és nem fogod a kérdezőket sem fárasztani...
    Mutasd a teljes hozzászólást!
  • Szóval akkor előről és sorba:

    Adott egy képfeltöltő, amellyel egyszerre több képet lehet feltölteni.
    A kiválasztott fileokat a js kilistázza.
    Azon fileok amelyek mérete meghaladja a beállított maximum méretet, azokra azt írja ki, hogy túl nagy a méret. Ekkor nem jelenik meg input mező sem.
    Ha nincs input mező, akkor az adott file feldolgozása nem fog végbemenni.

    Ezt szerettem volna egy file típussal kiegészíteni. Természetesen szerver oldalon is ellenőrzök, de így picit szebb a feltöltő script.

    Néztem amelyeket adtál. Első ránézésre egyik se az, ami nekem kellene. jquery-t nem használok. A forrásába belenézek, bár nem tudom találok-e benne olyat ami hasznos lehet.
    De azért köszönöm a segítséget!

    Viszont teszteltem a jelenlegi állapotában a képfeltöltőt.
    Szóval most olyan hiba van benne, hogy csak azon fileokat tölti fel, amelyik a tömbben az első. Szóval még alakítani kellesz rajta, de majd megoldom valahogyan.

    Mutasd a teljes hozzászólást!
  • Mivel nem tudom, hogy azóta megoldottad, ezért készítettem egy tesztet, ha ráérsz próbáld ki
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="hu" /> <link rel="Shortcut Icon" type="image/x-icon" href="../../favicon.ico" /> <title>Fájl típusa</title> <style type="text/css"> /* CSS Document */ html, body{margin:0;border-style:none;padding:0;background-color:#F4D19D; font-family:Verdana, sans-serif;font-size:12px;color:#111F10;text-align:center; } object, form{margin:0;padding:0;} a:link{color:#161612;text-decoration:none;} a:visited{color:#515140;} a:active{color:#515140;outline:none;} a:focus{outline:none;} a:hover{color:#515140;} </style> <script type="text/javascript"> var files = new Array(); function getStats(elem) { document.getElementById("kiir").innerHTML = 'Feltöltésre kiválaszva: '+elem.files.length+' fájl.<br \/><br \/>'; for(var i=0; i<elem.files.length; i++) { if(elem.files[i].type == "image/jpeg" && elem.files[i].size < 1000000) { files.push('<b>Fájlnév:<\/b> ' + elem.files[i].name + '<br \/> <b>Méret:<\/b> ' + elem.files[i].size + '<br \/> <b>Dátum:<\/b>' + elem.files[i].lastModifiedDate + '<br \/> <b>Típus:<\/b>' + elem.files[i].type); } else { files.push('<b>Fájlnév:<\/b> ' + elem.files[i].name + '<br \/> <b>Méret:<\/b> ' + elem.files[i].size + '<br \/> <b>Dátum:<\/b>' + elem.files[i].lastModifiedDate + '<br \/> <b>Típus:<\/b>' + elem.files[i].type + '(<span style="color:red;font-weight:700;">Nem megfelelő!!!!)<\/span>'); } } } function displayResult() { document.getElementById("kiir").innerHTML += '<hr class="rovid" \/>'; for (var j=0; j<files.length; j++) { document.getElementById("kiir").innerHTML += 'A '+j+'-dik: '+files[j]+'<br \/><hr class="rovid" \/>'; } document.getElementById("fname").value = ''; } </script> </head> <body> <h1>Kép típus ellenőrzése javascript(juhostt1)</h1> <form action="" method="post"> <b>Válassz ki egy vagy több képfájlt!</b> (Ellenőrzési határ: 1MB/JPEG)<br /> <input type="file" id="fname" size="100" onchange="getStats(this);" multiple="multiple" /> </form> <br /><br /> <button type="button" onclick="displayResult()">Fájlok ellenőrzése feltöltés előtt</button> <h3>Ellenőrzés eredménye</h3> <div id="kiir"></div> </body> </html>
    ...
    Ha nincs időd rá, nézd meg a következő LINK-en a "Teszt lista 2013 / CSS-tooltip" menüpont alatt...
    Mutasd a teljes hozzászólást!
  • Jó kis script, de még itt is csak a jpg fileokat figyeli. Ha csak egy fix képtípus mime-t kellene nézni, az menne. De mivel 3-at kell nézni, az ami nem megy sajnos. Nagy nehezen átverekedtem mysql-ből a js-nek a mime típusokat, már csak a megfelelő ellenőrzés hiányzik. Azért köszönöm. átnézem a scriptet, mert vannak benne számomra új dolgok (pl: files.push)
    Mutasd a teljes hozzászólást!
  • Melyik hármat?...
    Például így
    //if(elem.files[i].type == "image/jpeg" && elem.files[i].size < 1000000) if((elem.files[i].type == "image/jpeg" || elem.files[i].type == "image/png" || elem.files[i].type == "image/bmp") && elem.files[i].size < 1000000)
    ...
    Mutasd a teljes hozzászólást!
  • Tudtam hogy ez lesz a kontra válasz :D

    gif, jpg, png (mime-t nem írtam hozzájuk)
    Szóval ezeket kell vizsgálni, de úgy hogy mysql-ből küldöm át a vizsgálandó típusokat. Szóval lehet ma csak png van engedélyezve, holnap már png és jpg. Ezért dinamikusan kell megoldani, nem pedig fixen meghatározva. Így valóban nem nehéz a dolgog, de úgy kell, hogy mysql-ből nézze. Ezért próbáltam for-al végigmenni, csak nem úgy jött össze ahogy szerettem volna
    Mutasd a teljes hozzászólást!
  • Ha ennyire "dinamikus a dolog", akkor dinamikusan kell kezelni a zárójelben lévő ||-al összekötött elemeket...
    Az az a "MIME-töm"-öd tartalmától függően, még a ciklus elindítása előtt összeállítod, hogy a zárójelben hány vagylagos elem legyen és az teszed be az IF-be && előtti feltételként...
    Valami híres ember mondhatta -> Gondolkodom, tehát vagyok, én módosítanám -> Vagyok, tehát gondolkodom...
    Mutasd a teljes hozzászólást!
  • Húú! Hogy ez mért nem jutott eszembe...

    Na most küldök virtuálisan 1000 pontot!

    A megoldás sokkal egyszerűbb volt mint ahogy én megközelítettem a dolgot

    Nagyon köszönöm! Na mostmár teljes lesz a script.
    Mutasd a teljes hozzászólást!

  • Filozófia -> Descartes -> Cogito ergo sum...

    Saját filozófia -> szabofe -> Ego sum, ideo puto -> Eruditio est mater scientiam...
    Az utolsó "latin" sem felejtendő...
    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