Как добавить файл в filelist js

Обновлено: 04.07.2024

При всем бурном развитии web, и стандартов html в частности, работа с файлами, практически никогда не менялась. К счастью, с приходом HTML5 и связанных с ним API, сейчас у нас гораздо больше возможностей для работы с файлами, чем когда-либо в предыдущих версиях браузеров(iOS до сих пор нет поддержки File API).

Тип Файл - File

Тип File определен в спецификации File API[1] и является абстрактным представлением файла. Каждый экземпляр File имеет следующие свойства:
name – имя файла
size – размер файла в байтах
type – MIME тип файла

Объект типа File дает важную информацию о файле, не предоставляя прямой доступ к содержимому файла. Он является лишь ссылкой на файл, и получение данных из этого файла является отдельным процессом в целом.

Получение ссылок на файлы

Разумеется, доступ к пользовательским файлам строго запрещен в Интернете, потому как очевидны проблемы с безопасностью личных данных. Вы не хотели бы, чтобы Вы загружали веб-страницу, а затем она сканировала Ваш жесткий диск и выясняла, что там есть полезного. Нужно разрешение от пользователя, чтобы получить доступ к файлам с его компьютера. Тем не менее для веб-страниц чтения файлов разрешено каждый раз, когда пользователь решат что-то загрузить.

Когда вы используете элемент <input type="file">, Вы даете веб странице (и серверу) разрешение на доступ к файлу. Так, что первое, как вы можете получить объект File, это поле <input type="file">.

HTML5 определяет файловые ссылки для всех <input type="file"> управления. Эта коллекция FileList, которая представляет собой структуру в виде массива под названием FileList содержащую объекты типа File для каждого выбранного файла в поле <input type="file"> (помните, HTML5 позволяет выбрать несколько файлов в этом элементе управления). Так что в любой момент времени, Вы можете получить доступ к файлам пользователя, которые он выбрал, с помощью кода вроде этого:

Этот сравнительно простой код ожидает событие изменения в контроле(<input type="file"> ). Когда событие происходит, это означает, что выбор файла изменился, и код перебирает все объекты типа File и выводит информацию из них. Имейте в виду, что свойство файлов всегда доступны из JavaScript, так что вам не придется ждать следующего изменения, чтобы попытаться сделать что-то другое с ними.

Drag and drop файлов

Доступ к файлам из формы по средствам контролов по-прежнему требует действий пользователей: нахождение и выбора интересующего файла. К счастью, HTML5 Drag and Drop предоставляет еще один способ для пользователей, чтобы предоставить доступ к своим файлам: путем простого перетаскивания файлов с рабочего стола в веб-браузер. Все, что вам нужно сделать, чтобы это реализовать отслеживать два события.

Для того, чтобы читать файлы, которые упали на элемент страницы, вы должны отслеживать события DragOver и Drop, и отменять действия по умолчанию, в обоих. Это говорит браузеру, что вы знаете, что делаете :) и отменяет стандартные действия в таких случаях. Например, когда Вы перетаскиваете на страницу файл изображения, стандартным действием в таком случае будет открытие этого файла в этой вкладке. Это действие нужно отменить.

event.dataTransfer.files другой FileList объект, через который вы можете получить доступ, к информации о файлах. Код почти такой же, как и контролами формы и объекты типа File могут быть доступны таким же образом.

AJAX pагрузка файлов

Самое замечательное в объекте FormData, что вы можете добавить файл непосредственно к нему, фактически имитируя загрузку файла через HTML-форму. Все, что вам нужно сделать, это добавить в файл ссылки с определенным именем, и браузер сделает все остальное. Для примера:

И все это работает на последней версии большинства браузеров, включая Internet Explorer 10. К сожалению Internet Explorer 9 этого пока не поддерживает.

Что дальше

Мнение о том, что 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 определяем конкретную функцию обработки файла:

Я пишу онлайн-игру в HTML5. Один из файлов содержит список ресурсов, которые находятся в папке resources/img/ . Теперь я хотел бы, чтобы этот список автоматически генерировался на основе содержимого этой папки, а не обновлял его вручную каждый раз, когда я добавляю новое изображение. Я почти уверен, что Grunt может это сделать, но я не знаю, как правильно его настроить. Что я должен сделать, чтобы Grunt генерировал что-то подобное?

3 ответа

Я пытаюсь получить список файлов в каталоге с помощью Python, но мне не нужен список из ALL файлов. То, что я по сути хочу, - это возможность сделать что-то вроде следующего, но используя Python и не выполняя ls. ls 145592*.jpg Если для этого нет встроенного метода, я в настоящее время подумываю.

У меня есть огромный набор файлов .vcproj (

200), хранящихся в разных местах. У меня есть список этих файлов с полными путями. Как я могу автоматически добавить их в файл решения (. sln)? UPD: я ищу существующий tool/method.

ng-boilerplate делает что-то подобное.

Он использует шаблон для сценариев и таблиц стилей

А затем пользовательская задача grunt для обработки шаблона в соответствии с файлами

файлы ng-шаблонов перечислены в конфигурационном файле, но вы также можете использовать шаблон глобулирования или даже grunt.file API

Вы абсолютно можете это сделать. На самом деле это не так сложно, но вам понадобится пользовательская задача и использование узла FileSystem API . Попробуйте что-нибудь вроде этого:

В разделе конфигурации поместите это:

И в верхней части вашего файла поместите это:

И называйте это так:

Я сделал что-то похожее на то, что предложил джакерелла, но решил использовать шаблоны глобулирования (как предложил Флориан Ф.). Я добавил новую задачу ворчания:

И я добавил это в свою конфигурацию:

Таким образом, я могу включить данные с тегом <script> , как и любой другой JS. Спасибо вам обоим, ребята! :)

У меня есть текстовый файл в моем каталоге под названием mytextfile.txt , и я хотел бы добавить список всех файлов в моем текущем каталоге к существующему содержимому этого текстового файла. Я попробовал это : ls >> `mytextfile.txt` но это не работает . Я даже попробовал ls -a , но это тоже.

Я ищу способ перечислить первые 100 файлов (по дате создания) в каталоге без необходимости сначала делать полный список каталога, а затем передавать его другой утилите для усечения результатов. Причина в том, что в каталоге есть LOT файлов. Запуск (ls-l | head-n 100) занимает слишком много.

Похожие вопросы:

В настоящее время я использую язык шаблонов Jade HMTL (используемый в сочетании с CodeKit) для создания своего сайта. Одна из страниц моего сайта должна быть индексом всех страниц в определенном.

Каждый раз, когда я изменяю файл .coffee в режиме разработки, Rails создает соответствующий файл .js в том же каталоге /javascripts. В результате Rails заканчивает обработку обоих файлов и.

Возможный Дубликат : Получить список каталогов в a Lua Мне нужно перечислить все файлы в данном каталоге, используя язык lua. без добавления require lfs Как получить список файлов в каталоге lua ?

Я пытаюсь получить список файлов в каталоге с помощью Python, но мне не нужен список из ALL файлов. То, что я по сути хочу, - это возможность сделать что-то вроде следующего, но используя Python и.

У меня есть огромный набор файлов .vcproj (

200), хранящихся в разных местах. У меня есть список этих файлов с полными путями. Как я могу автоматически добавить их в файл решения (. sln)? UPD: я ищу.

У меня есть текстовый файл в моем каталоге под названием mytextfile.txt , и я хотел бы добавить список всех файлов в моем текущем каталоге к существующему содержимому этого текстового файла. Я.

Я ищу способ перечислить первые 100 файлов (по дате создания) в каталоге без необходимости сначала делать полный список каталога, а затем передавать его другой утилите для усечения результатов.

Я использую SDK для создания аддона Firefox. В настройках аддона пользователь может указать каталог изображений для моего аддона (они будут добавлены на веб-страницу). Я не могу понять, как получить.

Может ли кто-нибудь объяснить мне, почему это не работает? Я хочу получить список файлов в каталоге и использовать его в качестве входных данных для цикла. --- tasks: - set_fact: capabilities: [] -.

При всем бурном развитии web, и стандартов html в частности, работа с файлами, практически никогда не менялась. К счастью, с приходом HTML5 и связанных с ним API, сейчас у нас гораздо больше возможностей для работы с файлами, чем когда-либо в предыдущих версиях браузеров (iOS до сих пор нет поддержки File API).

Тип Файл — File

Тип File определен в спецификации File API и является абстрактным представлением файла. Каждый экземпляр File имеет следующие свойства: name — имя файлаtype — MIME тип файла

Объект типа File дает важную информацию о файле, не предоставляя прямой доступ к содержимому файла. Он является лишь ссылкой на файл, и получение данных из этого файла является отдельным процессом в целом.

Получение ссылок на файлы

Разумеется, доступ к пользовательским файлам строго запрещен в Интернете, потому как очевидны проблемы с безопасностью личных данных. Вы не хотели бы, чтобы Вы загружали веб-страницу, а затем она сканировала Ваш жесткий диск и выясняла, что там есть полезного. Нужно разрешение от пользователя, чтобы получить доступ к файлам с его компьютера. Тем не менее для веб-страниц чтения файлов разрешено каждый раз, когда пользователь решат что-то загрузить.Когда вы используете элемент <input type="file">, Вы даете веб странице (и серверу) разрешение на доступ к файлу. Так, что первое, как вы можете получить объект File, это поле <input type="file">.

HTML5 определяет файловые ссылки для всех <input type="file"> управления. Эта коллекция FileList, которая представляет собой структуру в виде массива под названием FileList содержащую объекты типа File для каждого выбранного файла в поле <input type="file"> (помните, HTML5 позволяет выбрать несколько файлов в этом элементе управления). Так что в любой момент времени, Вы можете получить доступ к файлам пользователя, которые он выбрал, с помощью кода вроде этого:

Этот сравнительно простой код ожидает событие изменения в контроле(<input type="file"> ). Когда событие происходит, это означает, что выбор файла изменился, и код перебирает все объекты типа File и выводит информацию из них. Имейте в виду, что свойство файлов всегда доступны из JavaScript, так что вам не придется ждать следующего изменения, чтобы попытаться сделать что-то другое с ними.

Drag and drop файлов

Доступ к файлам из формы по средствам контролов по-прежнему требует действий пользователей: нахождение и выбора интересующего файла. К счастью, HTML5 Drag and Drop предоставляет еще один способ для пользователей, чтобы предоставить доступ к своим файлам: путем простого перетаскивания файлов с рабочего стола в веб-браузер. Все, что вам нужно сделать, чтобы это реализовать отслеживать два события.

Для того, чтобы читать файлы, которые упали на элемент страницы, вы должны отслеживать события DragOver и Drop, и отменять действия по умолчанию, в обоих. Это говорит браузеру, что вы знаете, что делаете :) и отменяет стандартные действия в таких случаях. Например, когда Вы перетаскиваете на страницу файл изображения, стандартным действием в таком случае будет открытие этого файла в этой вкладке. Это действие нужно отменить.

event.dataTransfer.files другой FileList объект, через который вы можете получить доступ, к информации о файлах. Код почти такой же, как и контролами формы и объекты типа File могут быть доступны таким же образом.

AJAX pагрузка файлов

Самое замечательное в объекте FormData, что вы можете добавить файл непосредственно к нему, фактически имитируя загрузку файла через HTML-форму. Все, что вам нужно сделать, это добавить в файл ссылки с определенным именем, и браузер сделает все остальное. Для примера:

И все это работает на последней версии большинства браузеров, включая Internet Explorer 10. К сожалению Internet Explorer 9 этого пока не поддерживает.

Что дальше

Теперь вы знаете два способа доступа к информации о файле в браузере: через контрол формы и через нативный 'drag and drop'. Вероятно, появятся и другие способы доступа к файлам в будущем, но сейчас Вам нужно знать только эти два. Конечно, читать информацию о файлах, это только часть проблемы.Следующим шагом будет чтение данных из этих файлов, об этом и напишу во второй части статьи.

Ссылки по теме:

Часть 2: FileReader

В моем предыдущем посте, я затронул тему использования файлов в JavaScript, с особым акцентом на том, как получить доступ к объектам File. Эти объекты, содержащие блок метаданных, можно получить только тогда, когда пользователь либо собирается загрузить файл через контрол формы или перетаскивает его методом Drag&Drop на веб-страницу. Итак у Вас есть эти метаданные, следующим шагом является чтение данных из них.

Тип FileReader

Есть несколько форматов, в которые FileReader может представлять данные из файла, формат должен быть задан, когда файл открывается для чтения. Чтение осуществляется с помощью вызова одного из следующих методов:

  • readAsText — возвращает содержимое файла как plain text
  • readAsBinaryString — возвращает содержимое файла в виде строки закодированных двоичных данных (устарело — вместо него используйте readAsArrayBuffer)
  • readAsArrayBuffer — возвращает содержимое файла как ArrayBuffer (хорошо для двоичных данных, например, изображения)
  • readAsDataURL — возвращает содержимое файла как data URL

Этот пример просто читает содержимое файла и выводит его в виде обычного текста в консоль. Обработчик события onload вызывается, когда файл успешно прочитан в то время, как OnError вызывается, если файл не был прочитан по каким-то причинам. Объект типа FileReader доступен внутри обработчика события через event.target. В случае успеха чтения данных, в поле result, будет содержимое файла, иначе информацию об ошибках.

Чтение в data URIs

Вы можете использовать тот же код для чтения в data URI. Data URI (иногда называемый data URLs) представляют собой интересный вариант, если вы хотите, например, вывести изображение только, что прочтенное с диска. Вы можете сделать это, используя следующий код:

Этот код просто вставляет изображение, которое было прочитано с диска на страницу. Поскольку data URI содержит все изображения, оно может быть передано непосредственно в атрибут src тега <img> и отображено на странице. Как альтернативу данному методу, Вы могли бы , загружать изображение и рисовать его на <canvas>:

Этот код загружает изображение в новый объект Image, а затем использует его, чтобы сделать изображение на Canvas'е (с указанием ширины и высоты 100). Data URIs , как правило, используются для этой цели, но может быть использован на любом другом типе файлов. Наиболее распространенный вариант использования для чтения файлов в data URI для отображения содержимого файлов сразу на веб-странице.

Чтение в ArrayBuffers

Тип ArrayBuffer впервые был введен как часть WebGL. ArrayBuffer представляет собой конечное число байтов, которые могут быть использованы для хранения данных любого размера. Данные, которые записываются в ArrayBuffer являются типизированным массивом, и не могут содержать разнотипные данные, так как это могут делать традиционные JavaScript массивы.

Вы можете использовать ArrayBuffer в первую очередь при работе с бинарными файлами, чтобы иметь более точный контроль над данными. Вы можете передать ArrayBuffer непосредственно в метод send () объекта XHR для передачи исходных данных на сервер (на стороне сервера, данные принимаются и обрабатываются, как двоичные данные ).

Что дальше

Ссылки по теме:

Часть 3: Событие прогресса и ошибки

Событие прогресса (Progress events)

События показывающее прогресс какого-либо процесса очень распространены. Эти события спроектированы для отображения прогресса передачи данных. Такая передача происходит как при запросе данных с сервера, так и при запросе данных с диска, что FileReader и делает.

Есть шесть событий прогресса:

Два события, error и load, были обсуждены в моем предыдущем посте. Другие события дают более узкий контроль над процессом передачи данных.

Отслеживание прогресса

Когда вы хотите отследить прогресс чтения файлов, используйте событие progress. Объект event который является параметром этого события содержит 3 поля, для контроля передаваемых данных

  • lengthComputable — тип boolean указывает может ли браузер определить размер файла
  • loaded — число байтов которые уже загружены
  • total — общее количество байтов которые нужно прочитать

Эти данные позволяют создать прогресс бар, который будет показывать информацию от прогрессе загрузки . Например, вы можете использовать элемент HTML5 <progress> для мониторинга прогресса чтения файла. Вы можете связать уровень прогресса с фактическими данными, используя следующий код:

Это похоже на подход, который использует Gmail при реализации "drag and drop" загрузки файла, где вы видите прогрессбар сразу после добавления файла к электронному письму. Этот прогрессбар показывает, насколько файл уже передан на сервер.

Работа с ошибками

Даже если Вы читате локальный файл, это может привести к краху чтения. Спецификация File API определяет 4 типа ошибок:

  • NotFoundError — файл не может быть найден.
  • SecurityError — чтение файла не безопасно либо запрещено. Если файл слишком большой то Вы тоже увидите эту ошибку.
  • NotReadableError — файл существует, но не может быть прочитан, скорее всего, из-за проблемы с правами доступа.
  • EncodingError — возникает к примеру когда читаете файл как dataURI и длинна его выходит за пределы поддерживаемые браузером

При возникновении ошибки во время чтения файла, полю объекта FileReader error присваивается экземпляр одной из вышеупомянутых ошибок. По крайней мере, именно так написано в спецификации. На самом деле, браузеры реализовывают это как объект FileError, который имеет поле код, указывающий тип ошибки, которая произошла. Каждый тип ошибки представляет собой целочисленную константу:

  • FileError.ABORT_ERR когда вызван abort() в процессе чтения файла.

Вы можете проверить тип ошибки либо во время события error или во время события loadend:

Что дальше

Чтение файлов на JavaScript вообще штука интересная, Вы можете сохранить данные на карту памяти SD/SDHC/SecureDigital любых объемов? а затем прочитать их при помощи этого же FileAPI, что несомненно очень удобно. С учетом того, что онлайн приложенияразвиваются семимильными шагами покупаем карту SD SDHC в каком нибудьSotMarket и экспериментируем с чтением файла через JavaScript FileAPI уже сейчас.

Ссылки по теме

Часть 4: Объект URL

Ранее в блоге в серии Вы узнали, как использовать файлы традиционным путем. Вы можете загрузить файлы на сервер, и Вы можете читать содержимое файла с диска. Это наиболее распространенный способ работы с файлами. Тем не менее, это совершенно новый метод, может упростить некоторые общие задачи. Новый способ заключается в использовании объекта URL.

Что такое объект URL?

Объект Url — это адрес (идентификатор), который указывают на файл на диске. Предположим, что Вы хотите вывести изображение с из диска пользователя на веб-страницу. Сервер ничего не должен знать о файле, поэтому нет необходимости загружать его туда. Вы просто хотите отобразить файл в странице. Можно, как показано в предыдущих постах, получить ссылку на объект File, считать данные в data URI, а затем назначить data URI обычному <img>. Но думаю, это не лучший подход: образ уже существует на диске, читать изображения в другой формат для того, чтобы использовать его? Если вы создаете объект URL, вы можете связать его с <img> и тот получит доступ к этому локальному файлу напрямую.

Как это работает?

File API определяет глобальный объект, называемый URL, который имеет два метода. Первый createObjectURL(), который принимает ссылку на файл и возвращает объект URL. Это позволяет браузеру управлять через URL локальным файлом. Второй способ revokeObjectURL (), который указывает браузеру, как уничтожить URL, который передается в него, фактически освобождая память. Конечно, все объекты URL уничтожаются, как только веб-страницы выгружается, но хорошей практикой будет освободить их, когда они больше не нужны.

Поддержки объекта URL, как и для других частей File API, не так хороша. На момент написания поста, Internet Explorer, Firefox, поддерживают глобальный объект URL. Chrome поддерживает его в форме webkitURL в то время как Safari и Опера не имеют поддержки.

Пример использования

Вывести изображение, которое пользователь выбрал на веб страницу:

В примере объявляется переменная URL, которая совмещает различные реализации браузеров. Предполагая, что URL поддерживается браузером, код продолжает создавать объект URL прямо из файла и сохраняет его в ImageUrl. Новый элемент <img> создается и на обработчик события onload, вешается уничтожение объекта URL (подробнее об этом чуть позже). Затем, поле src изображения связывается с URL и элемент добавляется в страницу(это не обязательно, можно использовать уже существующий на странице элемент <img>).

Почему мы уничтожили объект URL после загрузки изображения? После загрузки изображения, URL больше не нужен, если вы не собираетесь использовать его с другим элементом. В этом примере, изображение загружается в один элемент, и после того, как изображение было полностью загружены, URL не несет никакой полезной цели. Самое время, чтобы освободить память, связанную с ним.

Безопасность и другие факторы

На первый взгляд, это возможность немного опасна. Вы загружаете файл непосредственно с компьютера пользователя через URL. Однако URL сам по себе не является большой проблемой безопасности, потому что это URL-адрес, который назначается динамически в браузере и был бы бесполезен на любом другом компьютере. А как насчет кросс-домменного использования?

Что дальше?

Возможность создания URL ссылающихся непосредственно на локальный файлам является мощным инструментом. Вместо того, чтобы читать локальный файл в JavaScript для того, чтобы отобразить его на странице, вы можете просто создать URL и указать элементу страницы использовать его, как адрес. Этот процесс значительно упрощает использование локальных файлов на странице. Тем не менее, удовольствие от работы с файлами в JavaScript только начинается. В следующей статье Вы узнаете некоторые интересные способы работы с данными из файла.

Самый первый способ применения, который лезет в голову это загрузка аватара на страницу. Очень удобно будет выбирать себе аву, редактировать ее, а лишь потом отсылать на сервер. Таким образом вы повысите юзабилити своего ресурса, после этого повыситься посещаемость, которая перерастет в новых клиентов. Однако перед этим, советую провести seo аудит сайта, дабы выяснить каким-образом он индексируется поисковыми системами.

Читайте также: