Js открыть проводник для выбора файла
Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента или drag and drop.
Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.
Итого
File объекты наследуют от Blob .
Помимо методов и свойств Blob , объекты File также имеют свойства name и lastModified плюс внутреннюю возможность чтения из файловой системы. Обычно мы получаем объекты File из пользовательского ввода, например, через или перетаскиванием с помощью мыши, в событии dragend .
Объекты FileReader могут читать из файла или Blob в одном из трёх форматов:
- Строка ( readAsText ).
- ArrayBuffer ( readAsArrayBuffer ).
- URL в формате base64 ( readAsDataURL ).
Однако, во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий URL с помощью URL.createObjectURL(file) и использовать его в теге или . Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.
как открыть представление локальной папки, нажав на любую ссылку?
Я пробовал много вариантов, как
ссылка на локальные ресурсы отключена во всех современных браузерах из-за ограничений безопасности.
- позволяет сайтам обнаруживать вашу операционную систему, проверяя пути установки по умолчанию
- разрешение сайтам использовать уязвимости системы (например, C:\con\con в Windows 95/98)
- позволяет сайтам обнаруживать настройки браузера или читать конфиденциальные данные
Internet Explorer 6 пакет обновления 1 (SP1) больше не позволяет просматривать локальный компьютер из зоны интернета. Например, если веб-узел содержит ссылку на локальный файл, Internet Explorer 6 SP1 отображает пустую страницу, когда пользователь нажимает на ссылку. Предыдущие версии Windows Internet Explorer следовали по ссылке на локальный файл.
на Опера (в контексте рекомендации по безопасности я уверен, что для этого есть более каноническая ссылка):
в качестве меры предосторожности Opera не позволяет веб-страницам ссылаться на файлы на локальном компьютере пользователя диск
Асинхронная обработка процесса загрузки
Использование метода click() скрытых элементов выбора файла
Рассмотрим следующую разметку HTML:
Код, обрабатывающий событие click, может выглядеть следующим образом:
Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.
Создание заданий на загрузку
Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj , с соответствующим File , прикреплённым в атрибут file . Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя Document.querySelectorAll() , как показано здесь:
Строка 2 получает NodeList в переменную imgs со всеми элементами документа, имеющих класс CSS obj . В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр FileUpload . Каждый из них отвечает за загрузку соответствующего файла.
But, what if we need the content of the file?
In order to get to the actual content of the file, for various reasons. place an image, load into canvas, create a window with Base64 data url, etc. we would need to use the FileReader API
We would create an instance of the FileReader, and load our user selected file reference to it.
Trying pasting the above code into your devtool's console window, it should produce a select-a-file dialog, after selecting the file, the console should now print the contents of the file.
Пример: Загрузка файла, выбранного пользователем
Ещё одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.
Пример: Использование URL объектов для отображения PDF
URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.
В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false Non-Standard .
А здесь изменение атрибута src :
Пример: Отображение эскизов изображений, выбранных пользователем
Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.
Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут type у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке " image.* "). Для каждого файла, который является изображением, мы создаём новый img элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.
Каждое изображение имеет CSS класс obj добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут file к каждому изображению, указав File ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем Node.appendChild() для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.
Затем мы устанавливаем FileReader для обработки асинхронной загрузки изображения и прикрепления его к img элементу. После создания нового объекта FileReader , мы настраиваем его функцию onload , затем вызываем readAsDataURL() для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в data: URL, который передаётся в колбэк onload . Наша реализация этой процедуры просто устанавливает атрибут src у элемента img загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.
Example - "Stackoverflow's new background image!"
Let's try to create a file select dialog to change stackoverflows background image to something more spicy.
open devtools, and paste the above code into console window, this should pop a select-a-file dialog, upon selecting an image, stackoverflows content box background should change to the image selected.
Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге загрузите их на сервер. В статье Работа с файлами обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.
Какую структуру должен иметь ваш веб-сайт?
Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:
- index.html : Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site .
- Папка images : Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем images внутри вашей папки test-site .
- Папка styles : Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем styles внутри вашей папки test-site .
- Папка scripts : Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем scripts внутри вашей папки test-site .
Using Vanilla JS
Same idea, without jQuery (credits to @Pascale):
I used the same technique (in pure js: form.file_selector.click();) where file_selector is a dynamically added file input (added by innerHTML). but it does not work. Any help or suggestions please?
@Ron van der Heijden thank you i think i figured out why it was not working (now it's working anyway). For those that may have similar issue may be the cause if that for security reasons the event does not fire unless it's called after user event (click or so). i was tying to fire the event just after (inside a function of) an ajax request.
FileReader
FileReader объект, цель которого читать данные из Blob (и, следовательно, из File тоже).
Данные передаются при помощи событий, так как чтение с диска может занять время.
- readAsArrayBuffer(blob) – считать данные как ArrayBuffer
- readAsText(blob, [encoding]) – считать данные как строку (кодировка по умолчанию: utf-8 )
- readAsDataURL(blob) – считать данные как base64-кодированный URL.
- abort() – отменить операцию.
Выбор метода для чтения зависит от того, какой формат мы предпочитаем, как мы хотим далее использовать данные.
- readAsArrayBuffer – для бинарных файлов, для низкоуровневой побайтовой работы с бинарными данными. Для высокоуровневых операций у File есть свои методы, унаследованные от Blob , например, slice , мы можем вызвать их напрямую.
- readAsText – для текстовых файлов, когда мы хотим получить строку.
- readAsDataURL – когда мы хотим использовать данные в src для img или другого тега. Есть альтернатива – можно не читать файл, а вызвать URL.createObjectURL(file) , детали в главе Blob.
В процессе чтения происходят следующие события:
- loadstart – чтение начато.
- progress – срабатывает во время чтения данных.
- load – нет ошибок, чтение окончено.
- abort – вызван abort() .
- error – произошла ошибка.
- loadend – чтение завершено (успешно или нет).
Когда чтение закончено, мы сможем получить доступ к его результату следующим образом:
- reader.result результат чтения (если оно успешно)
- reader.error объект ошибки (при неудаче).
Наиболее часто используемые события – это, конечно же, load и error .
Вот пример чтения файла:
Как упоминалось в главе Blob, FileReader работает для любых объектов Blob, а не только для файлов.
Поэтому мы можем использовать его для преобразования Blob в другой формат:
- readAsArrayBuffer(blob) – в ArrayBuffer ,
- readAsText(blob, [encoding]) – в строку (альтернатива TextDecoder ),
- readAsDataURL(blob) – в формат base64-кодированного URL.
Для веб-воркеров доступен синхронный вариант FileReader , именуемый FileReaderSync.
Его методы считывания read* не генерируют события, а возвращают результат, как это делают обычные функции.
Но это только внутри веб-воркера, поскольку задержки в синхронных вызовах, которые возможны при чтении из файла, в веб-воркерах менее важны. Они не влияют на страницу.
Использование элемента label скрытого элемента input
Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом .
Рассмотрим следующую разметку HTML:
В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click() . Также в данном случае вы можете стилизовать элемент label так, как пожелаете.
Пример: Отображение размера файла(ов)
Следующий пример показывает возможное использование свойства size :
Что должно быть сделано?
К настоящему моменту структура вашей папки должна выглядеть примерно так:
Получение информации о выделенных файлах
Объект FileList предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект File . Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины ( length ) списка файлов:
Конкретные объекты File могут быть получены обращением к списку файлов как к массиву:
Этот цикл проходит по всем файлам в списке файлов.
Всего существует три атрибута, предоставляемых объектом File , которые содержат полезную информацию о файле.
name Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути. size Размер файла в байтах, как 64-битное целое число (возможно только чтение). type MIME тип файла, как строка доступная только для чтения, или пустая строка ( "") если тип файла не может быть определён.
Выбор файлов с использованием технологии drag and drop
Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.
На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:
В данном примере мы превращаем элемент с ID, равным dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий dragenter , dragover и drop .
В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover , таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:
Вся настоящая магия происходит в функции drop() :
Здесь мы извлекаем из события поле dataTransfer , затем вытаскиваем из него список файлов и передаём этот список в handleFiles() . После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент input или технологию drag and drop.
Доступ к выбранным файлам через событие change
Также возможно (но не обязательно) получить доступ к FileList через событие change . Нужно использовать EventTarget.addEventListener() чтобы добавить обработчик события change , как показано здесь:
Обработчик события change можно назначить атрибутом элемента:
Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом FileList , который состоит из объектов File , представляющих файлы, выбранные пользователем.
Пример: Использование URL объектов с другими типами файлов
Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:
Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.
Есть два способа его получить.
Во-первых, есть конструктор, похожий на Blob :
- fileParts – массив значений Blob / BufferSource /строки.
- fileName – имя файла, строка.
- options – необязательный объект со свойством:
- lastModified – дата последнего изменения в формате таймстамп (целое число).
Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.
Так как File наследует от Blob , у объектов File есть те же свойства плюс:
- name – имя файла,
- lastModified – таймстамп для даты последнего изменения.
В этом примере мы получаем объект File из :
Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .
Доступ к выбранным файлам
Рассмотрим следующий код:
File API делает возможным доступ к FileList , который содержит объекты File , которым соответствуют файлы, выбранные пользователем.
Атрибут multiple элемента input позволяет пользователю выбрать несколько файлов.
Обращение к одному выбранному файлу с использованием классической DOM-модели:
Обращение к одному выбранному файлу через jQuery:
Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"
решение: запуск загружаемой ссылки
следующие работы во всех браузерах, но как всегда есть оговорки.
Справочная информация:
"ярлыки URL" зависят от ОС. Следующее решение для MS Windows, из-за отсутствия стандартов между средами.
Если вам требуется поддержка linux для решения ниже, см. Это статьи.
* Я не имею никакого отношения к статье, YMMV.url ярлыки приходят в двух формах:
файлы .Расширения URL основаны на тексте. Может генерироваться динамически.
файлы .Расширения LNK являются двоичными. Они могут генерироваться динамически,но требуют реализации iShelLinkInterface. Это осложняется ограничениями ОС по умолчанию, которые по праву препятствуют процессу IIS добрался до Шелла.
.URL-адрес является рекомендуемым решением, поскольку динамическая генерация жизнеспособна на веб-языках / фреймворках и позволяет реализовать KISS.
Обзор/Резюме:
- ограничения безопасности не позволят вам открыть путь / запустить проводник непосредственно со страницы (как указано @Pekka).
- сайты, размещенные извне (не на вашем локальном компьютере), не разрешают файл:///. uri с параметрами безопасности по умолчанию.
устранение:
Предоставьте загружаемую ссылку (.URL-адрес или .LNK) к ресурсу. Поведение браузера будет объяснено в конце поста.
Вариант 1: производить .файл LNK и сохраните его на сервере. Из-за бинарной природы .LNK файл, это не рекомендуемое решение, но предварительно сгенерированный файл должен быть жизнеспособным.
Вариант 2: производить .url-файл и либо сохранить его на сервере, либо динамически генерировать он. В моей ситуации я динамично создаю .URL-файл.
Подробности Решения (.URL-адрес):
добавить .url-адрес доступных типов MIME на веб-сервере.
Для IIS откройте сайт, выберите типы MIME и добавьте следующее:
расширение имени файла= .URL-адрес
MIME-тип: application/интернет-ярлыкSetEnvIf Request_URI ".url$ "requested_url=заголовок url добавить контент-диспозицию "вложение" env=requested_url
The .файл url-это текстовый файл, отформатированный следующим образом (опять же, это может быть динамически сгенерирован).
дать ссылку на скрипт, который генерирует .url-файл или сам файл.
Если вы просто загрузили .url-файл на ваш сервер, добавьте следующее в свой HTML:
Зависящее От Браузера Поведение
Internet Explorer: нажмите "Открыть" и перейдите прямо в каталог (нет необходимости сохранять ярлык)
Internet Explorer имеет предпочтительное поведение, но Chrome и Firefox по крайней мере исправен.
The problem actually is creation "upload" widget that can be integrated in a form. Widget will consists of two parts. The first part is div with initiator button and error/success messages. I think the way is put another form as the second part with file input and submit file into the iframe. After submition we fill hidden field in first part in main form or show errors in the same.
Easy way is adding file-form into main-form, but it's prohibited.
do you want to just style the upload input element ? so that it has not the default look, but e.g. the look of a button?
Управление процессом загрузки файла
Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.
Перед началом загрузки данных выполняются несколько шагов для подготовки:
JS only - no need for jquery
Simply create an input element and trigger the click.
This is the most basic, pop a select-a-file dialog, but its no use for anything without handling the selected file.
10 Answers 10
Пример: Использование URL объектов для отображения изображений
Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете посмотреть работающий пример.
HTML, который представляет интерфейс, выглядит так:
Метод handleFiles() может быть реализован таким образом:
Если объект FileList , передаваемый в handleFiles() является null , то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:
- Создаётся новый элемент - неупорядоченный список ( ).
- Этот новый элемент вставляется в блок с помощью вызова его метода element.appendChild() .
- Для каждого File в FileList , представляемого files :
- Создаём новый элемент пункта списка ( ) и вставляем его в список.
- Создаём новый элемент изображения ( ).
- Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя window.URL.createObjectURL() (en-US) для создания URL на двоичный объект.
- Устанавливаем высоту изображения в 60 пикселей.
- Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода window.URL.revokeObjectURL() (en-US), передавая в него строку URL объекта, которая указана в img.src .
- Добавляем новый элемент в список.
Using jQuery
I would create a button and an invisible input like so:
and add some jQuery to trigger it:
Handling the files
Adding an onchange event to the newly created input would allow us to do stuff once the user has selected the file.
At the moment we have the file variable storing various information :
Использование 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):
Файловые пути
Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл index.html и научим его отображать изображение, которое вы выбрали в статье "Каким должен быть ваш веб-сайт?"
- Скопируйте изображение, которое вы выбрали ранее, в папку images .
- Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.
Некоторые общие правила о путях к файлам:
- Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, my-image.jpg .
- Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: subdirectory/my-image.jpg .
- Для ссылки на целевой файл в директории выше вызывающего HTML файла, напишите две точки. Например, если index.html находится внутри подпапки test-site , а my-image.jpg - внутри test-site , вы можете обратиться к my-image.jpg из index.html , используя ../my-image.jpg .
- Вы можете комбинировать их так, как вам нравится, например ../subdirectory/another-subdirectory/my-image.jpg .
На данный момент это все, что вам нужно знать
Примечание: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например C:\windows . Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.
Небольшое отступление о регистре и пробелах
Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:
- Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg , а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
- Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html .
Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.
Где ваш веб-сайт должен располагаться на вашем компьютере?
Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.
- Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
- Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).
Читайте также: