Възможност за уеб съхранение се поддържа в HTML5 на добро ниво. Но това не е единственият начин за достъп до уеб страници с информация. В тази област постепенно въвежда няколко други стандарти, предназначени за извършване на различни видове задачи за съхранение на данни. Един такъв стандарт е програмен интерфейс на файла. които технически не е част от HTML5, но има добро ниво на подкрепа за всички модерни браузъри.
Също така е важно да се знае, че API на файла може да направи. Най-важното нещо, което той не може да промени файлове или създаване на нови файлове. За да запазите всички данни, е необходимо да се прибегне до други механизми, тези данни могат да се изпращат до уеб сървър чрез XMLHttpRequest, или да ги поставят в местен магазин.
Ако се съди по това, може би си мислите, че API интерфейс на файла е по-малко полезни от местния магазин, така и за по-голямата част от уеб сайтове, това ще бъде правилният извод. Но този стандарт отваря вратата за района, в който HTML не е включена в цената, поне без помощта на модули за разширение.
В момента се изисква интерфейс функционалност API файла за някои видове специализирани приложения, но в бъдеще може да се разшири капацитета си, и неговото значение ще се увеличи значително. Например, бъдещите версии на интерфейса може да позволят на уеб страници, за да съхранявате файлове на твърдия диск на клиента, при условие, че потребителят може да контролира името на файла и мястото за съхранение с помощта на "Запиши като" диалоговия прозорец. Разширителни модули, като светкавица, вече са оборудвани с тази възможност.
Browser Подкрепа API интерфейс File
API интерфейс File не разполага с такава широка подкрепа под формата на уеб магазина. Текуща поддръжка на браузъра този интерфейс е както следва:
Browser Подкрепа API интерфейс File
Тези браузъри ще почти сигурно не прилагат всички характеристики на файла API, защото Някои от стандарта (за работа с големи обеми от двоични данни и "отрязани" парчета на данни), са все още в процес на развитие.
Получаването на файл
Преди интерфейс File API ще бъде в състояние да направи нещо с файла, е необходимо да се получи този файл. Тази задача може да се направи по три различни начина, но всички те са еднакви в един от основните аспекти - уеб страница може да получи файл само ако посетителят изрично изберете и да предостави своята интернет-страница.
Методи за получаване на следния файл:
чрез елемент
Чрез скрит елемент
Чрез плъзгане и пускане метод
Ако браузърът поддържа този метод, можете да плъзнете файл от компютъра си или на прозореца на браузъра и го пусна с определена област уеб страница.
В следващите секции ще разгледаме всички тези подходи по-подробно.
Четене на текстов файл
Най-простият операция File API ще прочете съдържанието на обикновен текстов файл. Фигурата по-долу показва уеб страница, която използва този интерфейс гласи оформлението на уеб страници, а след това показва текста в прозореца на браузъра:
Създаването на този пример започва с елемент , което създава текстово поле и бутона "Избор на файл":
А сега да разгледаме парче processFiles () функция. Първо, трябва да се вземе първото изображение от колекцията на файлове, предоставени от елемент . Освен ако изрично не позволяват избор на множество файлове (чрез множество атрибути), колекция от файлове е гарантирано да съдържа само един файл, който се поставя в системата от клетки 0 Files:
Всички файлови обекти имат три потенциално полезни свойства. Имотът Името ни казва името на файла (без пътя), размер на собственост определя размера на файла в байтове, и тип имот информира за MIME тип на файла, ако може да се определи. Тези свойства могат да бъдат прочетени и използвани в допълнителна логика, например, да откаже да боравите с файлове, по-големи от определен размер, или да позволят да се справят само определени типове файлове.
На следващо място, създаване на FileReader обект, за да се справят с файл:
Сега ние сме почти готови да се обадите на някой от методите FileReader възразят за извличане на съдържанието на файла. Но тези методи са асинхронни. Това означава, че те започват да четат файла, но не очаквайте да получите данните. Ето защо, за да получите данните, трябва първо да обработи при зареждане на събитието:
Накрая, за да се подготви това събитие манипулатор, можете да се обадите метод readAsText () на FileReader на обект:
Този метод връща съдържанието на файла в един дълъг низ поставена в e.target.result имот, който на свой ред се изпраща на събитие при зареждане.
readAsText () метод работи правилно само за текстовото съдържание на файла, но не двоичен. Това означава, че той е идеален за работа с HTML файлове, както е показано на фигурата по-горе.
В допълнение към метода readAsText (), FileReader обект има няколко други методи за четене на файлове: readAsBinaryString (), readAsDataURL () и readAsArrayBuffer (), но последния метод не се поддържа във Firefox.
readAsBinary () метод осигурява уеб приложение да чете двоични данни, въпреки че вкарва тези данни са малко неловко в текстов низ, който не е особено ефективна. И ако все пак искате да се справят с тези данни, а след това, за това ще трябва да страдат с изключително объркващо код.
readAsDataURL () метод предоставя лесен начин за събиране на данни с изображения. Ние считаме, че използването на този метод, по-нататък, но първо да разбера как да направим нашия сайт по-красива.
резервен елемент
Разработчиците са съгласни, че стандартната контрола , се използва за качване на файлове, тя изглежда много по-добре. Но въпреки че не можем да избегнем да го използвате, не е необходимо, че потребителите са го виждали. Ние просто да го скриете със следните правила за стил:
Сега трябва да добавите нов контрол, който ще започне процеса на файл. Това е достатъчно, за да конвенционален бутон позовавайки се, можем да украсяват по всякакъв начин:
Последната стъпка е да обработва натисне ръчно инициализиране елемент извикване на метод кликване а () на елемента:
Натискане на този бутон започва showFileInput Now () функция, която "избутва" скрит бутон "Избор на файл" и показва диалогов прозорец, за да изберете файла. Това, от своя страна активира събитието onchange скрит елемент , която започва функция processFiles () по същия начин, както преди.
Image File четене
Тъй като ние научихме, FileReader манипулатори текстово съдържание в един прост трик. Благодарение на readAsDataURL на метод () то със същата лекота и обработва изображението.
Фигурата по-долу показва пример за осъществяването на което се използват две нови функции - поддръжка и графичен файл подбор от плъзгане и пускане:
На тази страница, изображението може да се представи по два начина: изберете изображение с помощта на контролите в долната или изтеглете и пуснете желания файл в избраната пунктирана рамка.
Избраното изображение се използва като фон елемент, въпреки че може също да бъде включен в платното и пиксел по пиксел обработка в мрежата. Този метод може да се прилага, например, за да се създаде страница, на която посетителите могат да вмъкнете изображение, което е достъпно за редактиране, и после запишете крайния резултат, като се обадите на XMLHttpRequest обекта.
Когато създавате първо трябва да се реши тази страница, кой елемент ще се влачат файлове. В този пример,
С правилата на указаното поле на стил лист, за да влачите и пускате на желания размер на файла и рамката за декорация и фона:
Може би сте забелязали, че в областта, за да плъзнете файла на изображението зададените свойства фон размер фон-повторение и да се подготви за следващата операция. Когато файлът със снимката е въвлечен в областта
За да се справят с плъзгане и пускане на файла имаме нужда от три неща: ondragenter, ondragover и ondrop. Когато страницата се зарежда всички тези събития се свързват съответния манипулатор:
ignoreDrag () функция работи както с ondragenter събитие (което се инициализира, когато мишката, за да влачите и пускате файлове, включени в зоната на изпадащите) и ondragover събитие (което стреля непрекъснато, докато се движи курсора на мишката, за да зоната на изпадащите). Този подход е възможно, защото ние не трябва да се отговори на тези действия, но и да каже на браузъра да не предприема никакви действия. Функционалният код е както следва:
Събитие ondrop по-важно, тъй като в него ще получим файл и да го обработи. Но тъй като в продължение на файла на страницата може да стане по два начина, действително да се получи спад на труда () функция призовава processFiles () функция:
processFiles () функция е последната стъпка в процеса на плъзгане на файла. Той създава FileReader обект се свързва с функцията за обработка на събитие и причинява при зареждане метод readAsDataURL () за конвертиране на данни за изображения в URL:
FileReader обект има няколко други събития, които могат да бъдат използвани, когато четенето на файла с изображението. onprogress пожари събития периодично по време на дълги операции, за да предоставят информация за количеството на изтеглените данни към днешна дата. (Операцията може да бъде отменена, преди да е приключило, като се обадите прекъсване () FileReader обект.) Onerror събитие се задейства в случай на проблеми с отварянето или четенето на файла. А onloadend събитие - ако операцията е завършена до който и да е метод, включително неговото предсрочно прекратяване поради грешка.
Свързани статии