Html вывести содержимое файла
Обновлено: 06.07.2024
Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента <input> или drag and drop.
Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.
Доступ к выбранным файлам
Рассмотрим следующий код:
File API делает возможным доступ к FileList , который содержит объекты File , которым соответствуют файлы, выбранные пользователем.
Атрибут multiple элемента input позволяет пользователю выбрать несколько файлов.
Обращение к одному выбранному файлу с использованием классической DOM-модели:
Обращение к одному выбранному файлу через jQuery:
Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"
Доступ к выбранным файлам через событие change
Также возможно (но не обязательно) получить доступ к FileList через событие change . Нужно использовать EventTarget.addEventListener() чтобы добавить обработчик события change , как показано здесь:
Обработчик события change можно назначить атрибутом элемента:
Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом FileList , который состоит из объектов File , представляющих файлы, выбранные пользователем.
Получение информации о выделенных файлах
Объект FileList предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект File . Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины ( length ) списка файлов:
Конкретные объекты File могут быть получены обращением к списку файлов как к массиву:
Этот цикл проходит по всем файлам в списке файлов.
Всего существует три атрибута, предоставляемых объектом File , которые содержат полезную информацию о файле.
name Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути. size Размер файла в байтах, как 64-битное целое число (возможно только чтение). type MIME тип файла, как строка доступная только для чтения, или пустая строка ( "") если тип файла не может быть определён.
Пример: Отображение размера файла(ов)
Следующий пример показывает возможное использование свойства size :
Использование метода click() скрытых элементов выбора файла
Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), вы можете скрыть непривлекательный элемент <input> и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input значение none (display:none) и вызывая метод click() скрытого элемента <input> .
Рассмотрим следующую разметку HTML:
Код, обрабатывающий событие click, может выглядеть следующим образом:
Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.
Использование элемента label скрытого элемента input
Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом <label> .
Рассмотрим следующую разметку HTML:
В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click() . Также в данном случае вы можете стилизовать элемент label так, как пожелаете.
Выбор файлов с использованием технологии drag and drop
Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.
На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:
В данном примере мы превращаем элемент с ID, равным dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий dragenter , dragover и drop .
В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover , таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:
Вся настоящая магия происходит в функции drop() :
Здесь мы извлекаем из события поле dataTransfer , затем вытаскиваем из него список файлов и передаём этот список в handleFiles() . После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент input или технологию drag and drop.
Пример: Отображение эскизов изображений, выбранных пользователем
Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.
Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут type у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке " image.* "). Для каждого файла, который является изображением, мы создаём новый img элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.
Каждое изображение имеет CSS класс obj добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут file к каждому изображению, указав File ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем Node.appendChild() для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.
Затем мы устанавливаем FileReader для обработки асинхронной загрузки изображения и прикрепления его к img элементу. После создания нового объекта FileReader , мы настраиваем его функцию onload , затем вызываем readAsDataURL() для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в data: URL, который передаётся в колбэк onload . Наша реализация этой процедуры просто устанавливает атрибут src у элемента img загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.
Использование URLs объектов
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) представляет поддержку для методов DOM window.URL.createObjectURL() (en-US) и window.URL.revokeObjectURL() (en-US) . Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM File , включая локальные файлы на компьютере пользователя.
Когда у вас есть объект File , на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:
URL объекта – это строка, идентифицирующая объект файла File . Каждый раз при вызове window.URL.createObjectURL() (en-US) , создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом window.URL.revokeObjectURL() (en-US) :
Пример: Использование URL объектов для отображения изображений
Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете посмотреть работающий пример.
HTML, который представляет интерфейс, выглядит так:
Здесь определяется элемент файла <input> , а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе Использование метода click() скрытых элементов выбора файла, как о методе вызова окна выбора файла.
Метод handleFiles() может быть реализован таким образом:
Он начинается с получения элемента <div> с ID fileList . Это блок, в который мы вставим наш список файлов, включая эскизы..
Если объект FileList , передаваемый в handleFiles() является null , то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:
- Создаётся новый элемент - неупорядоченный список ( <ul> ).
- Этот новый элемент вставляется в блок <div> с помощью вызова его метода element.appendChild() .
- Для каждого File в FileList , представляемого files :
- Создаём новый элемент пункта списка ( <li> ) и вставляем его в список.
- Создаём новый элемент изображения ( <img> ).
- Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя window.URL.createObjectURL() (en-US) для создания URL на двоичный объект.
- Устанавливаем высоту изображения в 60 пикселей.
- Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода window.URL.revokeObjectURL() (en-US) , передавая в него строку URL объекта, которая указана в img.src .
- Добавляем новый элемент в список.
Пример: Загрузка файла, выбранного пользователем
Ещё одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.
Создание заданий на загрузку
Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj , с соответствующим File , прикреплённым в атрибут file . Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя Document.querySelectorAll() , как показано здесь:
Строка 2 получает NodeList в переменную imgs со всеми элементами документа, имеющих класс CSS obj . В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр FileUpload . Каждый из них отвечает за загрузку соответствующего файла.
Управление процессом загрузки файла
Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.
Перед началом загрузки данных выполняются несколько шагов для подготовки:
Асинхронная обработка процесса загрузки
Пример: Использование URL объектов для отображения PDF
URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.
В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false .
А здесь изменение атрибута src :
Пример: Использование URL объектов с другими типами файлов
Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:
Если Вам нужно просто вставить в страницу целиком содержимое всего txt файла, напишите, как подсказал kein:
Если в txt файле несколько страниц и Вам нужно вывести одну случайную - замечательное решение предложил Вам fantasy4fun.
А вот если выводимая информация должна меняться в ответ на какие-либо действия пользователя - то тогда уже добро пожаловать в Аякс. Подробнее - по запросу. И так пост здоровенный получился.
Удачи!weabdizain
New Member
Можно сделать проще:
Для документа HTML сделать так:Dador
Member
nataly
Member
Спасибо, но к сожалению видимо по незнанию я не смогла применить PHP скрипт. А вот как это можно сделать с помщью скриптов JS? Мне кажется нужно смотреть выше и решать проблему глобальнее. Зачем обязательно тхт?
Это во первых, а во вторых, если используется php то можно написать echo file_get_contents('myfile.txt');
Если нет то думаю придется использовать JS и подгружать все через скрипты, к сожалению не могу посоветовать другого варианта кроме как jQuery ajax. Но мне кажется это самый простой выходОтличный скрипт, спасибо, однако я вставила его в свой HTML, выложила на сервер и в
результате - ничего (видимо я плохо знаю РНР) Даже не знаю, на что еще можно подумать.Если Вам нужно просто вставить в страницу целиком содержимое всего txt файла, напишите, как подсказал kein:
Если в txt файле несколько страниц и Вам нужно вывести одну случайную - замечательное решение предложил Вам fantasy4fun.
А вот если выводимая информация должна меняться в ответ на какие-либо действия пользователя - то тогда уже добро пожаловать в Аякс. Подробнее - по запросу. И так пост здоровенный получился.
Спасибо, в Вашем ответе сразу же масса ценной для меня информации, но пока - ничего не получилось. Файл txt простейший всего лишь из одной строки.
Удачи!tigra60
Спасатель
Может быть у Вас хостинг без РНР? Выложите, пожалуйста ссылки на Вашего хостера (и какой у Вас тарифный план) и на Ваш сайт. Или сами проверьте поддержку РНР следующим образом:
1. Создаете в текстовом редакторе файл test.php:
2. Помещаете этот файл в корневую папку Вашего сайта.
3. В адресной строке обозревателя набираете:
Частный случай
tigra60
Спасатель
Итоги двухчасовой борьбы с великим творением дядюшки Билла (оно таки меня победило. ):
Тут, собственно, все просто:
После загрузки страницы (body onload) вызывается функция getFile(name), где name - имя файла, который появится в блоке mytext.
Эта функция создает объект для запроса к серверу (посредством функции createRequest()), получает наш текстовый файл и запихивает его в блок с /> Проверено на Денвере: ИЕ, Опера, ФФ, Хром.
Теперь по поводу закомментированой строки, указывающей тип файла.
IE с этой строкой ВООБЩЕ работать не хочет.
Для остальных - если файл просто открыть в браузере, без этой строки вылезают кракозябрики.В общем, попробуйте залить на сайт этот файл и text.txt с любым текстом - проверьте будет ли работать.
Код, который написал уважаемый kein отлично работает, НО ПРИ ОДНОМ УСЛОВИИ:
все файлы должны иметь кодировку UTF-8. Возможно (даже скорее всего!), jQuery имеет средства для перекодировки, но я еще пока о них не знаю, может кто подскажет. Тогда главный файл может быть в любимой cp-1251, а текстовый все равно нужно будет делать в UTF-8.
Удачи!Мнение о том, что JavaScript не умеет взаимодействовать с файловой системой, является не совсем верным. Скорее, речь идет о том, что это взаимодействие существенно ограничено по сравнению с серверными языками программирования, такими как Node.js или PHP. Тем не менее, JavaScript умеет как получать (принимать), так и создавать некоторые типы файлов и успешно обрабатывать их нативными средствами.
В этой статье мы создадим три небольших проекта:
- Реализуем получение и обработку изображений, аудио, видео и текста в формате txt и pdf
- Создадим генератор JSON-файлов
- Напишем две программы: одна будет формировать вопросы (в формате JSON), а другая использовать их для создания теста
Получаем и обрабатываем файлы
Для начала создадим директорию, в которой будут храниться наши проекты. Назовем ее «Work-With-Files-in-JavaScript» или как Вам будет угодно.
В этой директории создадим папку для первого проекта. Назовем ее «File-Reader».
Создаем в ней файл «index.html» следующего содержания:
Здесь мы имеем контейнер-файлоприемник и инпут с типом «file» (для получения файла; мы будем работать с одиночными файлами; для получения нескольких файлов инпуту следует добавить атрибут «multiple»), который будет спрятан под контейнером.Стили можно подключить отдельным файлом или в теге «style» внутри head:
Можете сделать дизайн по своему вкусу.Не забываем подключить скрипт либо в head с атрибутом «defer» (нам нужно дождаться отрисовки (рендеринга) DOM; можно, конечно, сделать это в скрипте через обработку события «load» или «DOMContentLoaded» объекта «window», но defer намного короче), либо перед закрывающим тегом «body» (тогда не нужен ни атрибут, ни обработчик). Лично я предпочитаю первый вариант.
Откроем index.html в браузере:
![]()
Прежде чем переходить к написанию скрипта, следует подготовить файлы для приложения: нам потребуется изображение, аудио, видео, текст в формате txt, pdf и любом другом, например, doc. Можете использовать мою коллекцию или собрать свою.
Нам часто придется обращаться к объектам «document» и «document.body», а также несколько раз выводить результаты в консоль, поэтому предлагаю обернуть наш код в такое IIFE (это не обязательно):
Первым делом объявляем переменные для файлоприемника, инпута и файла (последний не инициализируем, поскольку его значение зависит от способа передачи — через клик по инпуту или бросание (drop) в файлоприемник):Отключаем обработку событий «dragover» и «drop» браузером:
Для того, чтобы понять, зачем мы это сделали, попробуйте перенести изображение или другой файл в браузер и посмотрите, что произойдет. А происходит автоматическая обработка файлов, т.е. то, что мы собираемся реализовать самостоятельно в познавательных целях.Обрабатываем бросание файла в файлоприемник:
Мы только что реализовали простейший механизм «dran'n'drop».Обрабатываем клик по файлоприемнику (делегируем клик инпуту):
Приступаем к обработке файла:
Удаляем файлоприемник и инпут:
Способ обработки файла зависит от его типа:
Мы не будем работать с html, css и js-файлами, поэтому запрещаем их обработку:
Мы также не будем работать с MS-файлами (имеющими MIME-тип «application/msword», «application/vnd.ms-excel» и т.д.), поскольку их невозможно обработать нативными средствами. Все способы обработки таких файлов, предлагаемые на StackOverflow и других ресурсах, сводятся либо к конвертации в другие форматы с помощью различных библиотек, либо к использованию viewer'ов от Google и Microsoft, которые не хотят работать с файловой системой и localhost. Вместе с тем, тип pdf-файлов также начинается с «application», поэтому такие файлы мы будем обрабатывать отдельно:
Для остальных файлов получаем их «групповой» тип:
Посредством switch..case определяем конкретную функцию обработки файла:Подскажите, пожалуйста, столкнулся с проблемой (в связи с тем, что умею выводить только "Привет мир" на страницу), : на компьютере имеется html-таблица, ячейки которой могу редактировать и скачивать txt-файл, в котором отображаются данные из таблицы. Вопрос, можно ли используя только JavaScript и JQuery считать данные из txt и заполнить таблицу?
Задача нужна для того, чтобы после добавления столбцов в таблице (по кнопки с помощью js-скрипта, можно было скачать файл (скрипт уже есть) и при открытии страницы заново можно было выгрузить данные из файла в таблицу сразу).Буду очень рад, если кто-то подскажет, пока пришел к выводу, что нужен php или ajax. Но можно ли каким-то другим способом ограничиться JS?
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесьHTML+JavaScript чтение TXT на хостинге
Доброго времени суток! Сразу хочу сказать, что о вредоносных программах речь не идёт. Проблема у.![]()
Чтение txt-файла и заполнение таблицы Excel
Добрый день, есть текстовый файл. Из него вынимаем данные, и записываем в excel таблицу. Вопрос как.Чтение данных из *.txt файла, находящегося в ресурсах, и заполнение этими данными DataGridView
На форме расположен ComboBox, в котором можно выбрать один из типов резьбы (G,M,Pg,Rp,Tr и все.Решение
технология ajax без проблем позволяет получать содержимое текстового файла
1. создайте текстовой файл myfile.txt с нужным вам содержимым
2. в той же директории создайте файл index.html со следующим кодом внутри:
откройте файл index.html в браузере и кликните по кнопке "start" -- страница получит содержимое текстового файла myfile.txt и выведет его в модальном окошке
для решения вашей задачи вам нужно вместо alert (htReq.responseText); // . прописать код, который содержимое текстового файла занесёт в нужные вам ячейки таблицы -- с этим помочь не могу, потому как не владею информацией ни о таблице, ни о текстовом файле
Спасибо за ответ. Но Ajax не получится в моих условиях использовать. Все, что имею - JS и JQuery.
Поэтому ищу варианты, которые помогут тем, что имею. Нашел способ заполнить таблицу из Json. Но вот как при изменении таблицы записать новые данные в Json не знаю.
Oetas, ajax -- это комбинация работы js и сервера
js поддерживается любым браузером, ваш компьютер -- это сервер
никаких более "условий" не нужнотак что. сделайте то, что я вам выше написал, лично убедитесь в том, что страница прочитывает текстовой файл, и не морочьте голову ни себе, ни людям
покуда вы изображаете попугая, с умным видом повторяющего где-то услышанные им слова (js, jquery, ajax, php, json), и не понимающего, что эти слова означают
Спасибо большое. Получилось!
Таблица состоит из 4-ех столбцов.
Номер Участник Состояние Описание
1111. Иванов. Готово. Предоставить доступ к БД
Подскажите, пожалуйста, сам так и не смог разобраться.
Он добавляет содержимое текстового файла в таблицу, но естественно в одну ячейку и весь текст файла.
Как сделать так, чтобы он в конкретную ячейку конкретную часть текста добавлял?
Таблица состоит из 4-ех столбцов:
Номер Автор Статус Содержание
В файле есть строка:
736 Иванов Выполнен повторная регистрацияНужно, чтобы в таблице html появилась эта строка, в ячейке Номер " 736", В Автор "Иванов", в Статус "выполнен", в Содержание "повторная регистрация".
Oetas, во-первых, необходимо так отформатировать строку текстового файла, чтобы можно было однозначно получить из неё именно ЧЕТЫРЕ "конкретные части"
из '736 Иванов Выполнен' путём разбиения по пробелам получается ТРИ "конкретные части", а вот как программа должна догадаться, что 'повторная регистрация' -- это всего ОДНА конкретная часть", а не ДВЕ?
у вас, что, пробел между словами 'повторная регистрация' имеет какой-то особый запах, отличный от запаха других пробелов в строке?
тогда вам нужен специальный компьютер, имеющий "нюх, как у собаки, и глаз, как у орла"во-вторых, из вашего описания таблицы непонятно -- имеется ли в таблице код строки с 4-мя пустыми ячейками для заполнения их 4-мя "конкретными частями" из текстового файла, или же всю эту строку с 4-мя ячейками создавать надо?
итожу: 1) разделите "конкретные части" в строке текстового файла каким-то символом, которого гарантированно не будет внутри любой "конкретной части", таковым символом, например, может быть горизонтальная табуляция (клавиша TAB на клавиатуре)
Возможность веб-хранилища поддерживается в HTML5 на хорошем уровне. Но это не единственный способ получения информации веб-страницами. В эту область понемногу вводится несколько других стандартов, направленных на выполнение разных типов задач хранения данных. Одним из таких стандартов является , который технически не входит в HTML5, но имеет хороший уровень поддержки на всех современных браузерах.
Судя по расплывчатому названию этого стандарта, может показаться, что это всеохватывающий стандарт для чтения и записи файлов на жесткий диск клиента. Но этот стандарт не настолько амбициозный или мощный. Он просто разрешает посетителю веб-сайта выбрать файл на своем жестком диске и передать его непосредственно коду JavaScript, исполняющемуся на просматриваемой веб-странице. Код может открыть этот файл и работать с его данными, будто это простой текст или что-то более сложное. Здесь ключевым аспектом является то обстоятельство, что файл передается непосредственно коду JavaScript. В отличие от обычной выгрузки файла, он никогда не отправляется на веб-сервер.
Судя по этому, можно подумать, что интерфейс File API менее полезен, чем локальное хранилище, и для большинства веб-сайтов это будет правильный вывод. Но этот стандарт приоткрывает дверь в область, в которую HTML раньше не входил, по крайней мере без помощи модулей расширений.
В настоящее время интерфейс File API является необходимой функциональностью для определенных типов специализированных приложений, но в будущем его возможности могут быть расширены, и важность его значительно возрастет. Например, будущие версии интерфейса могут позволять веб-страницам сохранять файлы на жесткий диск клиента при условии, что пользователь контролирует имя файла и место его сохранения, используя диалоговое окно "Сохранить как". Модули расширения, наподобие Flash, уже оснащены такой способностью.
Поддержка браузерами интерфейса File API
Интерфейс File API не имеет такой широкой поддержки, как веб-хранилище. Текущая браузерная поддержка этого интерфейса приводится в таблице ниже:
Поддержка браузерами интерфейса File API
Браузер IE Firefox Chrome Safari Opera Safari iOS Android Минимальная версия 10 3.6 8 6 11.1 - 3 Эти браузеры почти наверняка не реализуют все возможности File API, т.к. некоторые части стандарта (для работы с большими объемами двоичных данных и "вырезания" порций данных) все еще находятся в процессе разработки.
Получение файла
Прежде чем интерфейс File API сможет что-либо сделать с файлом, ему нужно этот файл получить. Эту задачу можно выполнить тремя разными способами, но все они одинаковые в одном ключевом аспекте — веб-страница может получить файл только в том случае, если посетитель явно выберет и предоставит его веб-странице.
Способы получения файла следующие:
Посредством элемента <input>
Присвоив атрибуту type значение file, мы получим стандартное окно для закачивания файла. Но с помощью небольшого сценария JavaScript и File API этот файл можно открыть локально.
Посредством скрытого элемента <input>
Элемент <input> очень непривлекательный. Чтобы не обезображивать им свою страницу, его можно скрыть и создать более прилично выглядящую кнопку. Нажатие этой кнопки активирует JavaScript-код, вызывающий метод click() скрытого элемента <input>, который открывает стандартное диалоговое окно выбора файла.
Посредством метода drag and drop
Если браузер поддерживает этот метод, файл можно перетащить с рабочего стола или окна браузера и отпустить его в определенной области веб-страницы.
В последующих разделах мы рассмотрим все эти подходы более подробно.
Чтение текстового файла
Самой простой операцией File API будет чтение содержимого простого текстового файла. На рисунке ниже показана веб-страница, которая с помощью этого интерфейса считывает разметку веб-страницы, а потом выводит этот текст в окне браузера:
![Загрузка текстового файла посредством File API]()
Создание этого примера начинается с элемента <input type="file">, который создает текстовое поле и кнопку "Выберите файл":
Но в то время как элемент <input> обычно вставляется в контейнер <form>, чтобы файл можно было закачать на веб-сервер, в данном случае наш элемент <input> играет самостоятельную роль. Когда посетитель страницы выбирает файл, активируется событие onchange элемента <input>, что в свою очередь активирует функцию processFiles(). Как раз на этом этапе и открывается файл посредством самого обыкновенного кода JavaScript.
Теперь рассмотрим по частям функцию processFiles(). Сперва нам нужно взять первый файл из коллекции файлов, предоставленных элементом <input>. Если явно не разрешить выбор нескольких файлов (посредством атрибута multiple), коллекция файлов будет гарантированно содержать только один файл, размещенный в элементе 0 массива файлов:
Все объекты файлов обладают тремя потенциально полезными свойствами. Свойство name сообщает нам имя файла (без пути), свойство size указывает размер файла в байтах, а свойство type информирует о MIME-типе файла, если его можно определить. Эти свойства можно считывать и использовать их в дополнительной логике, например, отказаться обрабатывать файлы больше определенного размера или разрешить обрабатывать файлы только определенного типа.
Далее создается объект FileReader для обработки файла:
Теперь мы почти готовы вызвать один из методов объекта FileReader, чтобы извлечь содержимое файла. Но эти методы являются асинхронными. Это означает, что они начинают чтение файла, но не ожидают получения данных. Поэтому, чтобы получить данные, сначала нужно обработать событие onload:
Наконец, подготовив этот обработчик события, можно вызывать метод readAsText() объекта FileReader:
Этот метод сбрасывает все содержимое файла в одну длинную строку, вставляемую в свойство e.target.result, которое в свою очередь отправляется событию onload.
Метод readAsText() работает должным образом только для текстового содержимого файла, но не для двоичного. Это означает, что он идеально подходит для работы с файлами HTML, как показано на рисунке выше.
Кроме метода readAsText(), объект FileReader имеет еще несколько других методов для чтения файлов: readAsBinaryString(), readAsDataURL() и readAsArrayBuffer(), но последний метод не поддерживается в Firefox.
Метод readAsBinary() предоставляет веб-приложению возможность считывать двоичные данные, хотя он вставляет эти данные в текстовую строку несколько неуклюже, что не является особенно эффективным. А если вы еще захотите разобраться с этими данными, то для этого вам придется мучиться с исключительно запутанным кодом.
Метод readAsDataURL() предоставляет легкий способ захватывать данные изображения. Мы рассмотрим применение этого метода далее, но сначала мы выясним, как сделать нашу страницу более красивой.
Замена элемента <input>
Веб-разработчики сходятся во мнении: стандартный элемент управления <input>, применяемый для выгрузки файлов, выглядит далеко не лучшим образом. Но хотя нам не избежать использования его, совсем необязательно, чтобы пользователи его видели. Мы можем просто скрыть его с помощью следующего стилевого правила:
Теперь нам нужно добавить новый элемент управления, который будет инициировать процесс предоставления файла. Для этого достаточно обычной кнопки со ссылкой, которую мы можем разукрасить каким угодно образом:
Последним шагом будет обработка нажатия кнопки путем инициализации вручную элемента <input> через вызов метода click() этого элемента:
Теперь нажатие этой кнопки запускает функцию showFileInput(), которая "нажимает" скрытую кнопку "Выберите файл" и отображает диалоговое окно для выбора файла. Это, в свою очередь, активирует событие onchange скрытого элемента <input>, которое запускает функцию processFiles() точно таким же образом, как и раньше.
Чтение файла изображения
Как мы узнали, объект FileReader обрабатывает текстовое содержимое в один простой прием. Благодаря методу readAsDataURL() он с такой же легкостью обрабатывает и изображения.
На рисунке ниже показан пример, для реализации которого используются две новые возможности - поддержка изображений и выбор файла методом drag and drop:
![Вставка изображения с помощью перетаскивания]()
На этой странице изображение можно представить двумя способами: выбрать файл изображения с помощью элементов управления внизу или перетащить и отпустить нужный файл в выделенную пунктиром рамку.
При создании такой страницы сначала нужно решить, какой элемент будет получать перетаскиваемые файлы. В нашем примере это <div>-элемент dropBox:
С помощью правил таблицы стилей задаем полю для перетаскивания файла желаемый размер и оформляем рамкой и фоном:
Возможно, вы заметили, что в поле для перетаскивания файла изображения установлены свойства background-size и background-repeat для подготовки к следующей операции. Когда файл изображения перетаскивается в поле <div>, то изображение используется в качестве фона этого элемента. Свойство background-size обеспечивает уменьшение размеров изображения, чтобы его можно было видеть полностью. А значение no-repeat свойства background-repeat обеспечивает, что изображение не повторяется для заполнения оставшегося пространства.
Для обработки перетаскивания и отпускания файла нам требуются три события: ondragenter, ondragover и ondrop. При загрузке страницы ко всем этим событиям подключается соответствующий обработчик:
Функция ignoreDrag() обрабатывает как событие ondragenter (которое инициализируется, когда указатель мыши с перетаскиваемым файлом входит в зону сбрасывания), так и событие ondragover (которое срабатывает постоянно во время движения курсора мыши в зоне сбрасывания). Такой подход возможен потому, что нам никак не нужно реагировать на эти действия, кроме как сообщить браузеру не предпринимать никаких действий. Код функции выглядит следующим образом:
Событие ondrop более важное, т.к. в нем мы получаем файл и обрабатываем его. Но поскольку файл для страницы можно предоставить двумя способами, собственно для выполнения работы функция drop() вызывает функцию processFiles():
Функция processFiles() является последним этапом в процессе перетаскивания файла. Она создает объект FileReader, подключает функцию обработки к событию onload и вызывает метод readAsDataURL() для преобразования данных изображения в данные URL:
Объект FileReader имеет еще несколько других событий, которые можно использовать при чтении файлов изображений. Событие onprogress срабатывает периодически в процессе длинных операций, чтобы предоставить информацию об объеме загруженных данных на текущий момент. (Операцию можно аннулировать до ее завершения, вызвав метод abort() объекта FileReader.) Событие onerror срабатывает в случае проблем с открытием или чтением файла. А событие onloadend — при завершении операции любым способом, включая ее преждевременное завершение вследствие ошибки.
Читайте также:
