Fájlok feltöltése a kiszolgálóra ajax használatával
A böngészők HTML5 specifikációjának végrehajtásával számos dolog az interneten sokkal könnyebbé és élvezetesebbé tette. Az egyik ilyen dolog általában az ajax-kérések és a fájlok feltöltése a kiszolgálóra különösen ajax használatával.
Tehát töltse le a fájlt a kiszolgálóra az oldal újratöltése nélkül - a minimális kódkóddal rendelkező verziót. A jQuery-t használjuk, és csak a kliens részt veszünk (szerveroldali nélkül).
A munkahelyen most fejlesztjük CRM rendszerünket. Vissza a Yii-re. A különlegessége a helyszínen, hogy ha menni a másik oldalra click esemény elfogott hivatkozással, a kérést küld a szervernek, és a fogadó cserébe csak a kívánt blokkot html-kódot, akkor átrajzolja a DOM-struktúrát. Végül mindenki boldog: az ügyfelek - a gyors munkakezdés, az adminisztrátorok - a szerverre csökkentett terhelés, a programozók csak élvezhetik a megoldás szépségét.
Kiderült, hogy mindez jó, köszönhetően a html5 specifikációnak. A termelési projektek fő hátránya az IE10 + támogatása. De úgy döntöttünk, hogy nem figyel a felhasználók IE8,9 - ha statisztikusok elindítása után a projekt fogja látni, hogy ezek az emberek nem is olyan kicsi, majd dönteni, és alá IE8,9.
Elsőként a JQuery Ajax feltöltése jött be. Úgy tűnik, hogy jó legyen, krasivenky, de mint minden kereteket, húz egy csomó js és css-fájlokat, valamint az okok helyett kód írása, az írás a helyes konfigurációval, hogy nem kellemes.
Úgy döntöttem, hogy mindent végrehajtok a jQuery-ban (a projektben, amelyet még használnak).
Kezdetben mindent megteszünk a lehető legegyszerűbb módon. A HTML-jelölés nagyon egyszerű lesz
Ezt a kódot a backend, amely egy normál típusú bemenet = file, az adatokkal url adja meg az URL, amellyel majd feltölteni a kép, nos, a neve tartalmazza a nevét input'a.
Az ügyfelünknél a következők lesznek
Menjünk tovább - js.
Itt minden a lehető legegyszerűbb:
Továbbá a parancsfájl jobb megértése érdekében a console.log (this.files) parancsot hagytam; - Láthatja, hogy az alapértelmezésben milyen adatszerkezetet hoz létre a c típusú = html elem.
De még akkor is sikerült szembe néznie egy árnyalattal. Nem semmiért rámutattam az opciófolyamatraData: hamis. Enélkül nem működik, a böngésző konzol, hiba történt: nem fogott Típushiba: Illegális hívása a Chrome és érthetőbben Típushiba: „append” nevezett egy objektumot, nem hajtja végre interfész FormData. a Firefox-ban (a Firebug legutóbbi gyilkossági jellemzője, hogy sokkal több értelmes hibát eredményez.) Gyakran ment.).
És minden, mert a proccessData = true jquery megpróbálja az összes ajax adatot egy sorba konvertálni. Természetesen egy fájlhoz ez nem feltétlenül szükséges, ezért ez a beállítás hamisnak fogja eltávolítani a jQuery-t a gyötrelemből.
A megoldás, amint kitaláltad, a processData paraméter hamisnak kell lennie. Most mindent dolgozott ki - a króm fejlesztői eszközein a Hálózat lapon látható, hogy a kérés sikeresen ment keresztül a fájladatokkal. Kiváló!
A szerver még mindig 404-es hibát küld vissza. Érthető - még egyáltalán nem foglalkoztam velük, ezért megsértette.
Szerver rész
A szerver beállítása után rout'ov action'a és hozzátéve, hogy a vezérlő (Ennek keretében minden tenni a különböző módon), akkor a hozzáférést a letöltött fájlt a globális tömb $ _FILES. Ezenkívül a php már letöltötte a fájlt a kiszolgálóra a tmp mappába. Most meg tudod csinálni vele, amit a szíved vágyik. De általában csak a fájl kényelmesebb könyvtárba való áthelyezésével korlátozódnak (a tmp-nek meg kell szüntetnie az ingatlant), és esetleg rekordot kell hozzáadnia az adatbázishoz.
Valójában egy egyszerű var_dump parancs ($ _ FILES) kaptam ezt a következtetést:
Bingo! A fájl sikeresen feltöltötte a kiszolgálóra az Ajax használatával.