Html как открыть окно выбора файла

Загрузка файлов

Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).

Рис. 1. Вид поля для загрузки файла в Firefox

Рис. 2. Загрузка файлов в Chrome

При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.

Синтаксис поля для отправки файла следующий.

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля для отправки файла

Атрибут	Описание
accept	Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
size	Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
multiple	Позволяет выбирать и загружать сразу несколько файлов.
name	Имя поля, используется для его идентификации обработчиком формы.

Прежде, чем использовать данное поле, в форме необходимо сделать следующее:

1. задать метод отправки данных POST ( method=»post» );
2. установить у атрибута enctype значение multipart/form-data .

Форма для загрузки файла продемонстрирована в примере 1.

Пример 1. Создание поля для отправки файла

HTML5 IE Cr Op Sa Fx

Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.

Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

• audio/* — выбор музыкальных файлов любого типа;
• image/* — графические файлы;
• video/* — видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept .

Табл. 2. Типы файлов

Значение	Описание
image/jpeg	Только файлы в формате JPEG.
image/jpeg,image/png	Только файлы в формате JPEG и PNG.
image/*	Любые графические файлы.
image/*,video/*	Любые графические и видеофайлы.

Использование дополнительных атрибутов показано в примере 2.

Пример 2. Загрузка фотографий

HTML5 IE 10+ Cr Op Sa Fx

Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .

Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.

Источник

Html как открыть окно выбора файла

59334 просмотра

7 ответа

Это не работает на Chrome 26 на Mac OS = (

Проблема на самом деле заключается в создании виджета «загрузки», который можно интегрировать в форму. Виджет будет состоять из двух частей. Первая часть — это div с кнопкой инициатора и сообщениями об ошибках / успехах. Я думаю, что способ поставить другую форму в качестве второй части с вводом файла и отправить файл в iframe. После добавления мы заполняем скрытое поле в первой части в основной форме или показываем ошибки в той же.

Простой способ — добавить файл-форму в основную форму, но это запрещено.

Ответы (7)

76 плюса

Использование jQuery

Я бы создал кнопку и невидимый ввод, как так

и добавьте jQuery для его запуска:

Использование Vanilla JS

Та же идея, без jQuery (кредиты @Pascale)

29 плюса

Только для JS — нет необходимости в jquery

Просто создайте элемент ввода и запустите щелчок.

Это самое простое, всплывающее диалоговое окно выбора файла, но его бесполезно без обработки выбранного файла .

Обработка файлов

Добавление onchange события во вновь созданный вход позволит нам делать что-то, как только пользователь выберет файл.

На данный момент у нас есть файловая переменная, хранящая различную информацию:

Но что, если нам нужно содержимое файла?

Для того, чтобы получить фактическое содержание файла, по разным причинам. поместите изображение, загрузите в холст, создайте окно с URL-адресом Base64 и т. д. нам нужно будет использовать FileReader API

Мы должны создать экземпляр FileReader и загрузить ссылку на выбранный пользователем файл.

При попытке вставить приведенный выше код в окно консоли вашего devtool, должно появиться диалоговое окно выбора файла, после выбора файла консоль теперь должна распечатать содержимое файла.

Пример — «Новое фоновое изображение Stackoverflow!»

Давайте попробуем создать диалог выбора файла, чтобы изменить фоновое изображение stackoverflows на что-то более пряное .

откройте devtools и вставьте приведенный выше код в окно консоли, после чего должно появиться диалоговое окно выбора файла, при выборе изображения фон содержимого поля stackoverflows должен измениться на выбранное изображение.

Автор: levi Размещён: 05.12.2016 10:18

8 плюса

Изменить: я не проверял это в WebKit, он на самом деле не работает с , но он должен работать с большинством других элементов — по крайней мере, в последних браузерах (не уверен, что в старых).

Проверьте эту скрипку с кодом выше.

7 плюса

Для полноты картины решение Рона ван дер Хейдена на чистом JavaScript:

Автор: Pascale Размещён: 14.11.2016 09:07

4 плюса

Чтобы расширить ответ от ‘levi’ и показать, как получить ответ от загрузки, чтобы можно было обработать загрузку файла:

1 плюс

ГОТОВ ИСПОЛЬЗОВАТЬ ФУНКЦИЮ (используя Promise)

0 плюса

Сначала объявите переменную для хранения имен файлов (чтобы использовать их позже):

Диалог открытия файла

Я публикую это, так что это может кому-то помочь, потому что в интернете нет четких инструкций о том, как хранить имена файлов в массиве!

Источник

Html как открыть окно выбора файла

используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления.»> элемент с атрибутом type=»file» позволяет пользователю выбрать один файл или более из файлового хранилища своего устройства. После выбора эти файлы могут быть загружены на сервер при помощи формы, или обработаны JavaScript и File API.

Value	DOMString представляет собой путь до выбранного файла.
Действия	change и input
Поддерживаемые атрибуты	accept , multiple , required
IDL атрибуты	files and value
Методы	select()

Value

Атрибут value элемента input содержит DOMString , который представляет путь к выбранным файлам. Если пользователь выбрал несколько файлов, value представляет первый файл из списка. Отстальные файлы можно определить используя HTMLInputElement.files свойство элемента input.

Additional attributes

files A элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:»> FileList object that lists every selected file. This list has no more than one member unless the multiple attribute is specified.

Using file inputs

A basic example

This produces the following output:

Note: You can find this example on GitHub too — see the source code, and also see it running live.

Regardless of the user’s device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

Including the multiple attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control , and then clicking). If you only want the user to choose a single file per , omit the multiple attribute.

When the form is submitted, each selected file’s name will be added to URL parameters in the following fashion: ?file=file1.txt&file=file2.txt

Getting information on selected files

The selected files’ are returned by the element’s files property, which is a элементы имеют файловые массивы которые позволяют получить доступ к файлам. Пример файлового тега:»> FileList object containing a list of File objects. The FileList behaves like an array, so you can check its length property to get the number of selected files.

Each File object contains the following information:

name The file’s name. lastModified A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight). lastModifiedDate A Date object representing the date and time at which the file was last modified. This is deprecated and should not be used. Use lastModified instead. size The size of the file in bytes. type The file’s MIME type. webkitRelativePath A string specifying the file’s path relative to the base directory selected in a directory picker (that is, a file picker in which the webkitdirectory attribute is set). This is non-standard and should be used with caution.

Note: You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57 (see .files»>баг 1384030).

Limiting accepted file types

Often you won’t want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.

Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

• accept=»image/png» or accept=».png» — Accepts PNG files.
• accept=»image/png, image/jpeg» or accept=».png, .jpg, .jpeg» — Accept PNG or JPEG files.
• accept=»image/*» — Accept any file with an image/* MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
• accept=».doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document» — accept anything that smells like an MS Word document.

Let’s look like a more complete example:

This produces a similar-looking output to the previous example:

Note: You can find this example on GitHub too — see the source code, and also see it running live.

It may look similar, but if you try selecting a file with this input, you’ll see that the file picker only lets you select the file types specified in the accept value (the exact nature differs across browsers and operating systems).

The accept attribute doesn’t validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that the accept attribute is backed up by appropriate server-side validation.

Examples

In this example, we’ll present a slightly more advanced file chooser that takes advantage of the file information available in the HTMLInputElement.files property, as well as showing off a few clever tricks.

Note: You can see the complete source code for this example on GitHub — file-example.html (see it live also). We won’t explain the CSS; the JavaScript is the main focus.

First of all, let’s look at the HTML:

This is similar to what we’ve seen before — nothing special to comment on.

Next, let’s walk through the JavaScript.

Note: opacity is used to hide the file input instead of visibility: hidden or display: none , because assistive technology interprets the latter two styles to mean the file input isn’t interactive.

Next, we add an event listener to the input to listen for changes to its selected value changes (in this case, when files are selected). The event listener invokes our custom updateImageDisplay() function.

Whenever the updateImageDisplay() function is invoked, we:

Use a while loop to empty the previous contents of the preview

The custom validFileType() function takes a File object as a parameter, then loops through the list of allowed file types, checking if any matches the file’s type property. If a match is found, the function returns true . If no match is found, it returns false .

The returnFileSize() function takes a number (of bytes, taken from the current file’s size property), and turns it into a nicely formatted size in bytes/KB/MB.

Источник

Полностью своя кнопка «Выбрать файл»

Изучая веб-программирование, я не нашел внятного решения проблемы оформления загрузки файла на сервер при помощи одной кастомной кнопки.

Предлагаю на суд сообщества свой велосипед. На написание данного текста вдохновил Способ №5 из материала Делаем красивый input[type=file] для адаптивного сайта… И да — все работает в IE, начиная с 9 версии.

Цель: создать свою кнопку/элемент управления по нажатию которой происходит загрузка файла на сервер (либо иные, предусмотренные разработчиком, файловые операции).
Инструменты: CSS, PHP, JavaScript.
Используемые технологии: Ajax, через скрытый iframe.

Преамбула

Из кода для упрощения сознательно выкинуты все процедуры проверки принятого файла и try-catch вызовов функций, так как эти моменты не являются темой данной статьи. Также не охватывается момент по предотвращению звукового сигнала в IE. В работе используем технологию Ajax, подразумевающую, что у нас есть основная страница, осуществляющая взаимодействие с пользователем(front-end) и скрипт на сервере, обрабатывающая наши запросы(back-end)

Технология работы

1. На главной странице создаем «form action» Делаем ей target на скрытый фрейм, который создаем статически (или динамически). Создаем два «input» с типом «file» и «submit», даем им «id», помещаем их в «div», который спрячем со страницы стилем. Все эти элементы не видимы для пользователя и не воспринимают каких-либо его действий.
2. Начинаем «магию». Для «input» с типом «file» на событие по изменению вешаем вызов функции onchange=«LoadFile();».
3. На главной странице создаем кнопку. Навешиваем ей на событие нажатия кнопки мыши вызов функции onclick=«FindFile();».
4. В функции FindFile() имитируем клик на «input» с типом «file». То есть при нажатии на нашу кнопку вызывается стандартный диалог выбора файла. Как только пользователь выбрал файл, срабатывает событие onchange и вызывается функция LoadFile(). В функции LoadFile() имитируем клик на «input» с типом «submit».
5. Форма формирует POST запрос с именем файла к нашему back-end скрипту, который осуществляет все проверки по безопасности и загрузку файла. После этого скрипт вызывает callback функцию главной страницы, которой сообщает о результате выполнения.

Собственно все. Для примера приведены четыре основных файла, код которых приведён ниже:

css/style.css – стили главной страницы
view/upload.php – back-end скрипт загрузки файла
index.php – главная страницы
js/upload.js – front-end скрипты главной страницы

Кроме того, необходим любой файл с картинкой для кнопки buttons/openfile.png

Загружаемые файлы помещаем в директорию ../temp/

Создаем стиль кнопки и скрытого «input».

Здесь все согласно примерам в интернете, валидация файлов изъята:

Источник