Trageți și fișiere picătură de încărcare

Eu sunt în prezent lucrează la un cititor RSS Readerrr. Și în fața mea a avut sarcina de a diversifica modul obișnuit de a adăuga fișiere prin intermediul intrării, aș dori să pună în aplicare drag and drop model. Uneori, această metodă este mult mai convenabil, nu-i așa?

Markup este nimic special. Ea este o etichetă obișnuită, simplă Forma, deși există, de asemenea, unități cu state potențial.

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

In timp ce blocuri de state nu avem nevoie, ei se ascund:

Statele. box__uploading afișate în timpul fișierul de descărcare prin intermediul Ajax (toate celelalte state ale blocurilor sunt ascunse). Apoi, în funcție de rezultatul descărcării este afișat .box__success sau .box__error.

input [type = „file“] și eticheta - elementele funcționale ale formei. Tipul de hârtie fișier de setare input'ov, am descris modul în care le puteți stiliza. De asemenea, în acest articol am discutat de ce avem nevoie de atribut [date multiple caption]. De intrare și eticheta sunt metode convenționale alternative de selectare a fișierelor (sau numai în cazul în mod drag and drop nu este acceptată).

box__dragndrop afișat dacă browser-ul acceptă drag and drop.

proprietăţi de detectare

În primul rând, trageți evenimentul în sine # 038; picătură. Lucrările la detectarea proprietăților suportate pot încredința cu încredere biblioteca Modernizr. Următorul eveniment de încercare:

În continuare, trebuie să verificați interfața FormData. Această interfață creează un obiect de program al fișierului selectat (e), după care el (și) pot fi trimise la server prin intermediul Ajax:

De asemenea, verificați datatransfer obiect. Aici un pic, metoda de viclean pentru a verifica, pentru că există încă o sută la sută modalitate de a testa pentru susținerea obiectului înainte ca utilizatorul începe să interacționeze cu interfața drag and drop. Nu toate browserele suporta obiectul. În general, aceste tipuri de momente UX, pentru a evita:

„Trageți și plasați fișierele aici!“

Utilizatorul pentru a trage și fixați fișierele și

„Hopa, am făcut o glumă, această caracteristică nu este acceptată.“

Sarcina principală în timp pentru a verifica suportul pentru FileReader API atunci când încărcați un document. Ideea este că, dacă un browser acceptă FileReader, atunci el, de asemenea, a susținut datatransfer:

Adăugați codul de mai sus în funcție de samovyzyvayuschuyusya anonim ...

... poate ajuta să se definească în mod clar sprijinul proprietăților:

Cu o metodă complet de lucru pentru detectarea proprietăților acceptate, putem spune utilizatorului dacă este sau nu utilizat drag and drop sau nu pot. În cazul sprijinului la forma, puteți adăuga o clasă specială, apoi la stiliza forma:

Nu contează dacă trageți # 038; picătură nu este acceptată. Utilizatorii pot încărca fișiere prin intrare simplu vechi [type = „file“]!

Vă rugăm să rețineți: există un bug Microsoft Edge. după care trageți # 038; picătură nu funcționează. Dezvoltatorii par să știe deja despre ea, și lucrează la un fix.

Drag 'n' picătură

Acum obține ocupat. În această parte vom adăuga la forma sau elimina o clasă specială de state, cum ar fi atunci când utilizatorul deține unitatea de deasupra matriței. Atunci când utilizatorul eliberează butonul mouse-ului, vom prinde fișiere de date.

e.preventDefault () și e.stopPropagation () pentru a preveni orice efecte adverse ale unor evenimente specifice în browser.

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

e.originalEvent.dataTransfer.files returnează o listă de fișiere. Mai târziu, voi arăta cum să folosească aceste informații pentru a trimite fișiere la server.

Cu clasa .este-dragover vom indica utilizatorului atunci când este posibil să se elibereze fișierele:

Modul standard pentru a selecta fișiere

uneori, trageți # 038; picătură nu este cel mai convenabil mod de a selecta fișiere. Mai ales în cazul în care utilizatorul are un ecran mic. Acest lucru înseamnă că trebuie să dea utilizatorului posibilitatea de a alege între diferite metode de descărcare. Acest lucru ne va ajuta pentru a introduce tipul de fișier și eticheta. Modul lor stilizat am descris. Puteți salva integritatea modelului:

Ajax Se încarcă

Nu există nici o modalitate de cross-browser pentru a realiza pe deplin trageți # 038; picătură fără Ajax. Unele browsere (IE și Firefox) nu vă permite să setați o valoare în input'ah tip de fișier, care apoi pot fi trimise la server. Codul de mai jos nu funcționează:

În loc de codul de mai sus, după trimiterea formularului pe care doriți să utilizați Ajax:

În clasa .este-încărcând un dublu sens: previne retrimitere formular (return false), și îi arată procesul de trimitere a formularului:

Ajax pentru browserele moderne

În cazul în care formularul nu a fost în fișierul de descărcat, atunci nu am avea nevoie de două moduri diferite de Ajax. Dar, din păcate, IE9 de mai jos și nu este susținută de încărcare XMLHttpRequest.

Pentru a înțelege ce metodă este acceptată, puteți utiliza testul nostru isAdvancedUpload gata. Pentru că în cazul în care browser-ul acceptă, așa cum am scris mai sus, acesta va sprijini procesul de boot prin XMLHttpRequest. Codul de mai jos funcționează în IE10 +:

FormData ($ form.get (0)) colectează date de la toate input'ov.

Ciclul $ .each () peste toate fișierele reiterează fac obiectul unui dumping. ajaxData.append () adaugă aceste fișiere în stivă care urmează să fie trimise prin Ajax.

data.success și data.error - linia JSON cu rezultatul unui returnat de server. Următoarele arată cum ar arata pe PHP:

Ajax pentru browsere mai vechi

Metoda de IE9-. Nu avem nevoie pentru a colecta tragere # 038; picătură fișiere (isAdvancedUpload = false), deoarece această metodă nu este acceptat de browser-ul dumneavoastră. Forma funcționează prin intrarea [type = „file“]. Destul de ciudat, iframe inserare dinamică funcționează:

trimite automat fișierele

Dacă forma numai tragere # 038; picătură caseta sau un fișier de intrare tipuri, comoditatea utilizatorului pot fi făcute la fișierele sunt încărcate automat la server fără a apăsa butonul de trimitere. Pentru a face acest lucru, trebuie să porniți manual evenimentul să prezinte:

Afișează fișierele selectate

Dacă nu utilizați metoda de a trimite automat fișierele la server, este necesar să se arate că utilizatorul a selectat cu succes pentru a descărca fișiere:

Făcând clic pe butonul de trimitere, pagina se va actualiza. Deoarece JS este dezactivat, nu se poate folosi pentru a arăta rezultatul trimiterii. Aici este necesar să se bazeze pe server. Mai jos este un exemplu:

Și unele revizuiri în markup:

Revizie: Echipa webformyself.

Tehnologii moderne de dezvoltare web

AngularJS, WebPACK, NodeJS, ReactJS, typescript, Gulp, Git, Github.
Aflați totul despre cele mai noi tehnologii in dezvoltarea web

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram