Drag and drop file feltöltés
Én jelenleg dolgozik egy RSS olvasó Readerrr. És előttem volt a feladat, hogy változatossá a szokásos módon hozzá fájlokat keresztül a bemeneti, szeretnék végre drag and drop modell szerint. Néha ez a módszer sokkal kényelmesebb, nem?
A jelölő semmi különös. Ő egy közönséges, egyszerű tag A forma, bár ott is egységek potenciális államokban.

Modern web fejlesztési technológiák
AngularJS, Webpack, NodeJS, ReactJS, géppel, korty, Git, GitHub.
Tudjon meg mindent a legújabb technológiák webfejlesztés
Míg blokkok államok nem kell, rejtőznek:
Az államok. box__uploading közben megjelenik a letöltött fájl segítségével Ajax (összes többi állam a blokkok eltűnnek). Ezután eredményétől függően a letöltés jelenik .box__success vagy .box__error.
bemenet [type = „file”], és a címke - a funkcionális elemeit formájában. A papírtípus beállítása input'ov fájlt, leírtam, hogyan stilizálhatja őket. Szintén ebben a cikkben azt tárgyalja, hogy miért van szükségünk tulajdonítani [data-többszörös caption]. A bemeneti és a címkét a lehetséges konvencionális eljárás fájlok kiválasztásával (vagy egyetlen módja, ha a drag and drop nem támogatott).
box__dragndrop jelenik meg, ha a böngésző támogatja a drag and drop.
Detection tulajdonságok
Először húzza maga az esemény # 038; dobja. A munka a felismerése a támogatott tulajdonságokat is magabiztosan bízni az Modernizr könyvtárban. A következő teszt esemény:
Ezután meg kell, hogy ellenőrizze FormData felület. Ez az interfész létrehoz egy program objektum a kiválasztott fájl (ok), amely után ő (és) lehet eljuttatni a szerver segítségével Ajax:
Azt is ellenőrizze, Adatátvitel objektumot. Itt egy kicsit, ravasz módszerrel ellenőrizni, mert még mindig száz százalékos módon tesztelni támogatására a tárgy előtt a felhasználó elkezd kölcsönhatásba lépnek a drag and drop. Nem minden böngésző támogatja az objektumot. Általában az ilyen típusú pillanatok UX elkerülése érdekében:
"Drag and drop fájlokat innen!"
A felhasználó a drag and drop a fájlokat és
„Hoppá, csináltam egy vicc, ez a funkció nem támogatott.”
A fő feladat az időben, hogy ellenőrizze támogatását FileReader API betöltésekor dokumentumot. Az ötlet az, hogy ha a böngésző támogatja a FileReader, akkor ő is támogatta a Adatátvitel:
Adjuk hozzá a fenti kódot névtelen samovyzyvayuschuyusya funkció ...
... ez segíthet, hogy egyértelműen meghatározzák a támogatás tulajdonságok:
Egy teljes mértékben működő módszert kimutatására támogatott tulajdonságokat, azt lehet mondani, a felhasználó-e vagy sem használja drag and drop vagy nem tud. Abban az esetben, támogatás formájában, akkor adjunk hozzá egy különleges besorolású, akkor stilizál alakja:
Nem számít, ha nem húzza # 038; csepp nem támogatott. A felhasználók tölthetnek fel fájlokat keresztül öreg input [type = „file”]!
Kérjük, vegye figyelembe: van egy hiba a Microsoft él. ami után húzza # 038; csepp nem működik. A fejlesztők úgy tűnik, hogy már tud róla, és dolgoznak a hiba javításán.
Drag 'n' drop
Most kap elfoglalt. Ebben a részben fogunk hozzá a formában, vagy távolítsa el egy különleges besorolású államok, mint például, amikor a felhasználó a készülék felett penész. Amikor a felhasználó elengedi az egérgombot, elkapjuk adatfájlokat.
e.preventDefault () és e.stopPropagation () a kedvezőtlen hatások megelőzése bizonyos események a böngészőben.

Modern web fejlesztési technológiák
AngularJS, Webpack, NodeJS, ReactJS, géppel, korty, Git, GitHub.
Tudjon meg mindent a legújabb technológiák webfejlesztés
e.originalEvent.dataTransfer.files visszatér a fájlok listáját. Később, megmutatom, hogyan kell használni ezt az információt küld fájlokat a szerverre.
Osztályú .ie-dragover fogjuk jelzi a felhasználónak, ha ez lehetséges, hogy kiadja a fájlokat:
A szokásos módon válassza ki a fájlokat
néha húzza # 038; csökkenés nem a legkényelmesebb módja annak, hogy válassza ki a fájlokat. Különösen, ha a felhasználó egy kis képernyőn. Ez azt jelenti, hogy meg kell adni a felhasználónak a választást a különböző letöltő módszerekkel. Ez segít nekünk, hogy adja meg a fájl típusát, és a címkét. Stilizált módon leírtam. Ön tudja menteni a integritását a design:
Ajax betöltése
Nincs több böngészővel módon teljes mértékben kihasználni a húzás # 038; csepp nélkül Ajax. Egyes böngészők (IE és Firefox) nem teszi lehetővé, hogy hozzanak egy értéket input'ah típusú fájl, ami aztán lehet küldeni a szerverre. Az alábbi kód nem működik:
Ahelyett, hogy a fenti kódot Az űrlap elküldése után a használni kívánt Ajax:
Osztályba .ie feltöltésével kettős jelentése van: megakadályozza újraküldésének (return false), és megmutatja a felhasználók a folyamat az űrlap elküldése:
Ajax a modern böngészők
Ha az űrlap nem a letöltött fájl, akkor nem lenne szükség két különböző módon Ajax. De sajnos, IE9 alatt nem támogatja a betöltés XMLHttpRequest.
Ahhoz, hogy megértsük melyik módszert támogat, akkor a teszt kész isAdvancedUpload. Mert ha a böngésző támogatja, mint írtam fent, hogy támogatni fogja a rendszerindítást keresztül XMLHttpRequest. Az alábbi kód működik IE10 +:
FormData ($ form.get (0)) adatokat gyűjt minden input'ov.
Cycle $ .Minden () lépked át az összes fájlt lerakásra. ajaxData.append () hozzáadja ezeket a fájlokat a verem küldhetők Ajax.
data.success és data.error - JSON eredményével összhangban a kiszolgáló által visszaadott. Az alábbiakban bemutatjuk, hogy hogyan nézne ki a PHP:
Ajax régebbi böngészőkhöz
Eljárás IE9-. Nem kell gyűjteni drag # 038; drop fájlokat (isAdvancedUpload = false), mert ez a módszer nem támogatja a böngészője. Az űrlap keresztül működik a bemeneti [type = „file”]. Furcsa módon, a dinamikus beillesztést iframe működik:
Automatikusan fájlokat küldeni
Ha az űrlap csak drag # 038; csepp doboz, vagy bemeneti fájltípus felhasználó kényelmét lehet, hogy a fájlok automatikusan feltölteni a szerverre megnyomása nélkül a küldés gombot. Ehhez manuálisan kell indítania az esemény benyújtania:
Jeleníti meg a kijelölt fájlokat
Ha nem használja a módszert az Auto Küldj fájlokat a szerverre, szükséges, hogy a felhasználó, hogy sikeresen kiválasztotta a fájlt letölteni:
Ha rákattint a küldés gombra, az oldal frissül. Mivel JS van kapcsolva, akkor nem tudja használni, hogy bemutassák az eredmény a küldő. Itt meg kell támaszkodni a szerveren. Az alábbiakban egy példát:
És néhány kiigazítást a jelölésben:
Felülvizsgálat: Team webformyself.

Modern web fejlesztési technológiák
AngularJS, Webpack, NodeJS, ReactJS, géppel, korty, Git, GitHub.
Tudjon meg mindent a legújabb technológiák webfejlesztés
A legtöbb IT hírek és webfejlesztés A csatorna-távirat