Плъзнете и пуснете за качване на файлове
Аз съм в момента работи по RSS четец Readerrr. И пред мен имаше за задача да разнообрази по обичайния начин за добавяне на файлове през входа, бих искал да приложи влачите и пускате модел. Понякога този метод е много по-удобно, нали?
Маркирането не е нищо особено. Тя е обикновен, прост етикет Формата, въпреки че има и единици с потенциални държави.
Съвременните технологии за уеб програмиране
AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране
Докато блокове от държави, ние не се нуждаят, те се крият:
Щатите. box__uploading показва по време на файла за изтегляне чрез Ajax (всички други състояния на блоковете са скрити). След това, в зависимост от резултата на изтеглянето се показва .box__success или .box__error.
вход [тип = "файл"] и етикета - функционалните елементи на формата. тип хартия настройка input'ov файл, който описах как можете да ги стилизирам. Също така в тази статия се обсъжда защо се нуждаем от атрибут [данни множествен надпис]. Въвеждане и етикет са алтернатива конвенционален метод за избор на файлове (или само начин, ако плъзгане и пускане не се поддържа).
box__dragndrop показва, ако браузърът поддържа влачене и пускане.
свойства за откриване
На първо място, плъзнете самото събитие # 038; капка. Работата по разкриване на поддържаните свойствата може уверено да се повери на Modernizr библиотеката. Следващият тест събитието:
След това трябва да се провери FormData интерфейс. Този интерфейс се създава програма обект на избрания файл (а), след което той (и) може да бъде изпратена до сървъра чрез Ajax:
Също така проверете DataTransfer обект. Тук малко, хитър метод, за да се провери, защото все още има сто процента начин за тестване на подкрепата на обекта, преди потребителят да започне да си взаимодействат с интерфейса на плъзгане и пускане. Не всички браузъри поддържат обекта. Като цяло, тези видове моменти UX да се избегне:
"Плъзгате и пускате файлове тук!"
Потребителят да влачите и пускате файлове и
"Ами сега, аз се пошегува, тази функция не се поддържа."
Основната задача навреме, за да се покажат подкрепа за FileReader API, когато зареждането на документ. Идеята е, че ако един браузър поддържа FileReader, тогава той също подкрепи DataTransfer:
Добавете кода по-горе в анонимна функция samovyzyvayuschuyusya ...
... тя може да помогне да се определи ясно подкрепата на имота:
С напълно работещ метод за откриване на поддържаните имоти, ние можем да кажем на потребителя дали той се използва влачене и пускане или не може. В случай на подкрепа за формата, можете да добавите специален клас, а след това да стилизирам форма:
Няма значение, ако плъзнете # 038; капка не се поддържа. Потребителите могат да качват файлове чрез обикновена стара вход [тип = "файл"]!
Моля, обърнете внимание: не е бъг Microsoft Edge. след което плъзнете # 038; капка не работи. Разработчиците изглежда вече знаете за него, и работят по оправя.
Drag 'N' Drop
Сега се зает. В тази част ще добавим към формата или премахване на специален клас на състояния като, когато потребителят държи устройството над формата. Когато потребителят освободи бутона на мишката, ще хване файлове с данни.
e.preventDefault () и e.stopPropagation (), за да се предотврати нежелани ефекти на специални събития в браузъра.
Съвременните технологии за уеб програмиране
AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране
e.originalEvent.dataTransfer.files връща списък от файлове. По-късно ще покаже как да използват тази информация, за да изпратите файлове на сървъра.
С класа .is-dragover ние ще покаже на потребителя, когато е възможно да се пусне на файловете:
Стандартният начин да изберете файлове
понякога плъзнете # 038; капка не е най-удобният начин за избор на файлове. Особено, ако потребителят има малък екран. Това означава, че трябва да се даде на потребителя да направи избор между различни методи за сваляне. Това ще ни помогне да въведете типа на файла и на етикета. Тяхната стилизиран начин описан аз. Можете да запазите целостта на изображението:
Аякс Зарежда
Не е кръстосано браузър начин да се реализира напълно плъзгане # 038; капка без Аякс. Някои браузъри (IE и Firefox), не ви позволяват да зададете стойност в input'ah тип файл, който след това може да бъде изпратена до сървъра. Кодът по-долу не работи:
Вместо кода по-горе, след като изпратите формуляра, който искате да използвате Ajax:
В клас .is качване на двойно значение: тя предотвратява повторното изпращане на формуляра (върне невярно), и показва на потребителите в процеса на изпращане на формуляра:
Аякс за съвременни браузъри
Ако формата не е бил в изтегления файл, тогава ние няма да се наложи два различни начина за Аякс. Но за съжаление, IE9 и по-долу не се поддържа от товарене XMLHttpRequest.
За да се разбере кой метод се поддържа, можете да използвате нашия тест готов isAdvancedUpload. Защото, ако браузърът, който поддържа, както писах по-горе, тя ще поддържа зареждане чрез XMLHttpRequest. Кодът по-долу работи в IE10 +:
FormData ($ form.get (0)) събира данни от всички input'ov.
Цикъл $ .Всеки () повтаря върху всички файлове дъмпингови. ajaxData.append () добавя тези файлове на стека, за да бъдат изпратени чрез Ajax.
data.success и data.error - JSON съответствие с резултата от върнати от сървъра. По-долу показва как ще изглежда на PHP:
Аякс за по-стари браузъри
Метод за IE9-. Ние не трябва да се съберат плъзгане # 038; пускате файлове (isAdvancedUpload = фалшива), тъй като този метод не се поддържа от вашия браузър. Формата работи чрез въвеждане [тип = "файл"]. Странното е, че динамично вмъкване вградена рамка работи:
Автоматично изпращане на файлове
Ако си форма само плъзгане # 038; Поле за пускане или вход типове файлове, удобство за потребителя могат да бъдат направени до файловете се качват автоматично към сървъра, без да натискате бутона за изпращане. За да направите това, ще трябва ръчно да започне събитието представи:
Показва избраните файлове
Ако не се използва метода на Auto можете да прикачите файлове на сървъра, че е необходимо да се покаже на потребителя, че той успешно е избран файлове за изтегляне:
С кликване върху бутона за изпращане, страницата ще се обновява. Тъй като JS е забранена, не можете да го използвате, за да се покаже резултатът от изпращането. Тук е необходимо да се разчита на сървъра. По-долу е един пример:
А някои корекции в маркирането:
Редакция: Екип webformyself.
Съвременните технологии за уеб програмиране
AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране
Най-IT новини и уеб разработки на нашия канал Телеграма