JQuery előnézeti kép feltöltéskor probléma

Keresés
Hírlevél
 
ASPC#C++CSSDelphiFlashJavaJavaScriptPascalPerlPHPPythonuniPaaSVisual BasicVisual C++  »    
nyitotta: Latkóczy Dávid, idő: 2012.07.04., moderátor: Árnyék
  Értesítés változás esetén Felvétel kedvencekhez Küldés emailben

Kategóriák:Programozási nyelvek » JavaScript
Web-programozás » HTML

Ez a téma lezárásra került a moderátor által. A lezárás oka: 1 téma - 1 kérdés
Sorrend:
Időzóna:
Blokkméret:
Oszd meg!
Sziasztok!

Szeretnék készíteni előnézeti képet egy képfeltöltőhöz.
A függvényt a file input onchange eseményére kötném rá.
Arra lenne szükségem, hogy a form postolása előtt, a kép feltöltése nélkül, php nélkül, jQuery segítségével megjelenítsem a feltöltendő képet ha ez lehetséges.

Mivel a kép nincs fönt a szerveren, csak a kliens gépről olvashatom be. A file input valuéjában csak a fájlnév van benne, az elérési út nem. Meg olvastam, hogy néhány böngésző biztonsági okokból nem mutatja az ilyen elérési utakat.

Második ötletem, hogy data image-ként jelenítsem meg a képet, url nélkül, tehát a bekódolt képet raknám az src-be. Hogyan tudom ezt előállítani?

Előre is köszi!
Te csak ne akarj garázdálkodni a gépemen levő fájlokkal, jó? Ennyi. Flash-el vagy JAVA applet-el megcsinálhatod, ott ha engedem futtatni vagy én tallózom ki akkor lesz engedélyed, amúgy nem. előzmény
Mért, a file inputnál is te tallózod ki nem?
Ez nem magától szedegetne össze mindenféle képeket, csak megjelenítené, amit a júzer kiválaszt.

Szóval a file inputból, ha már kiválasztott egy képet, nem lehet kinyerni a kép datát? előzmény
Nem lehet, úgy szokták, hogy feltöltik rögtön és visszaadnak egy kis képet (pl swfuploaddal lehet) előzmény
Hát köszönöm, akkor lehet ajaxolni fogok, ha nincs jobb megoldás. előzmény
html5-öt támogató böngészőknél megoldható a file feltöltése nélküli is a dolog, de a régebbieknél tényleg nem lehet. Lásd pl. itt. Persze, html5-öt támogató böngészővel próbáld ki (pl. Chrome) előzmény
Köszönöm, végül maradtam az ajaxos megoldásnál. A demó már működött, most majd beépítem a rendeltetési helyére.
Ha elkészültem vele, itt is publikálom a kódot, hátha másoknak is segít... előzmény
Valószínű megkésve, de ha lesz időd nézd meg a következő LINK-en a "Teszt lista 2012 / Ajax Upload" menüpont alatti tesztet és forráskódját...
Az ötletet a következő OLDAL-ról letölthető forráskódból vettem. Ha megnézed az "upload.js fájlt" akkor látod, hogy ha a
if (formdata)
{
  $.ajax({
    url: "upload.php",
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function (res) {
    document.getElementById("response").innerHTML = res;
    }
  });
}
részt(a feltöltés hívást megakadályozod) kiveszed az "input.addEventListener()"-ből és a "if (formdata)" true esetén egy gombklikkre indítod csak el, akkor is lejátszódik a "showUploadedItem()" és megjeleníti a képeket feltöltés előtt...
Igaz nem próbáltam ki, de elvileg működnie kell. Ha mégsem, akkor SORRY a zavarásért. előzmény
Köszönöm! Nem késtél el vele...
Nekem ezt sikerült összehoznom, de utólag találtam benne egy hibát, szóval kipróbálom amit küldtél. A hiba az, hogy miután megtörténik az ajaxos postolás, a file input értéke "kiürül" és a rendes postoláskor már nem tartalmazza a fájl elérési útját. Visszaírni meg azért nem lehet, mert a böngésző biztonsági okokból meggátolja a value írását. előzmény
Csak érdekességként nekem a TESZT-emnél meg törölni kellett, hogy a megmaradó előzőt ne töltse még egyszer fel ("upload.js" -> window.upload.reset();)... előzmény
Na, belekukkantottam. Nem teljesen tiszta a dolog... legalábbis az én fejemben
A FormData hogy képződik?
A php-m már megvan. A jquery esemény is. Shortcode alapján kigenerálom a .change() eseményeket, de most az egyszerűség kedvéért legyen egy fix input. Annak az értékét hogy kell belerakni a post datába?
if (window.FormData) {
    formdata = new FormData();
// Ezt a részt felül nem értem
    $.ajax({
        url: "<?php echo imgprevURL; ?>ajax.php",
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
        success: function (res) {
            // Meg kéne még szerezni a fájlnevet is
            $('img_prev').attr('src', '<?php echo imgprevURL; ?>tmp/'+file);
        }
    });
}
Nem tudsz mutatni valami egyszerűbb példakódot?
Kép vágás sem kell, meg semmi extra, csak egy előnézet (img tag) oldal újratöltése nélkül, ajaxos posztolással. előzmény
Meg tudnád esetleg mutatni, hogy ebben a kódban melyik a törlés rész?
Én egy form.submit()-ot látok benne, az okozza? előzmény
ajaxupload.3.5.js
Mivel ez már a "sokadik" kérdés és le fogja zárni a moderátor, szerintem keress meg PRIVÁT... előzmény
Most, hogy mondod, igazad van, kissé eltávolodtam az eredeti kérdéstől, de a cél ugyanaz. Akkor megy a privi, de a végén jó lenne közzétenni a megoldást. előzmény
Ez a téma lezárásra került a moderátor által. A lezárás oka: 1 téma - 1 kérdés
Oszd meg!