Get file value html

HTML DOM Input FileUpload Object

The Input FileUpload object represents an HTML element with type=»file».

Access an Input FileUpload Object

You can access an element with type=»file» by using getElementById():

Example

Tip: You can also access by searching through the elements collection of a form.

Create an Input FileUpload Object

You can create an element with type=»file» by using the document.createElement() method:

Example

Input FileUpload Object Properties

Property	Description
accept	Sets or returns the value of the accept attribute of the file upload button
autofocus	Sets or returns whether a file upload button should automatically get focus upon page load
defaultValue	Sets or returns the default value of the file upload button
disabled	Sets or returns whether the file upload button is disabled, or not
files	Returns a FileList object that represents the file or files selected with the file upload button
form	Returns a reference to the form that contains the file upload button
multiple	Sets or returns whether a user is allowed to select more than one file in the file upload field
name	Sets or returns the value of the name attribute of the file upload button
required	Sets or returns whether a file in the file upload field must be selected before submitting a form
type	Returns which type of form element the file upload button is
value	Returns the path or the name of the selected file

Standard Properties and Events

The Input FileUpload object also supports the standard properties and events.

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Работа с Input File JS/jQuery

Сборник приёмов jQuery для работы с полями загрузки файлов через интерфейс File.

Во всех примерах используется следующий HTML код:

И поле для выбора нескольких файлов:

Очистка поля

$("#file").val(null); /* или */ document.getElementById("file").value = null;

Пример:

Проверка заполнения

if ($("#file").val() == '') < alert("Файл не выбран"); >else < alert("Файл выбран"); >/* или */ if (document.getElementById("file").value == '') < alert("Файл не выбран"); >else

Пример:

Получить количество выбранных файлов

$('#btn').click(function()< alert($("#file")[0].files.length); >); /* или */ $('#btn').click(function()< alert(document.getElementById("file").files.length); >); 

Пример:

Получить имя выбранного файла

Свойство File.name возвращает имя файла, на который ссылается объект File.

alert($("#file")[0].files[0].name); /* или */ alert(document.getElementById("file").files[0].name);

Пример:

Имена всех выбранных файлов (multiple)

let names = []; for(var i = 0; i < $("#file")[0].files.length; i++)< names.push($("#file")[0].files.item(i).name); >alert(names.join("\r\n"));

Пример:

Получить тип выбранного файла (MIME)

File.type возвращает MIMEтип файла.

alert($("#file")[0].files[0].type); /* или */ alert(document.getElementById("file").files[0].type);

Пример:

Типы всех выбранных файлов (multiple)

let names = []; for(var i = 0; i < $("#file")[0].files.length; i++)< names.push($("#file")[0].files.item(i).type); >alert(names.join("\r\n"));

Пример:

Получить размер выбранного файла

File.size возвращает размер файла в байтах.

Пример:

Размер всех выбранных файлов (multiple)

$('#btn').click(function() < let size = 0 for(var i = 0; i < $("#file")[0].files.length; i++)< size += $("#file")[0].files.item(i).type; >alert(size); >);

Пример:

Комментарии

Другие публикации

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

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

Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет.

Сборник jQuery приемов с textarea — получить содержимое, вставить значение, подсчет количества символов и строк и т.д.

Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений.

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

Источник

Работа с Input File JS/jQuery

Сборник приёмов jQuery для работы с полями загрузки файлов через интерфейс File.

Во всех примерах используется следующий HTML код:

И поле для выбора нескольких файлов:

Очистка поля

$("#file").val(null); /* или */ document.getElementById("file").value = null;

Пример:

Проверка заполнения

if ($("#file").val() == '') < alert("Файл не выбран"); >else < alert("Файл выбран"); >/* или */ if (document.getElementById("file").value == '') < alert("Файл не выбран"); >else

Пример:

Получить количество выбранных файлов

$('#btn').click(function()< alert($("#file")[0].files.length); >); /* или */ $('#btn').click(function()< alert(document.getElementById("file").files.length); >); 

Пример:

Получить имя выбранного файла

Свойство File.name возвращает имя файла, на который ссылается объект File.

alert($("#file")[0].files[0].name); /* или */ alert(document.getElementById("file").files[0].name);

Пример:

Имена всех выбранных файлов (multiple)

let names = []; for(var i = 0; i < $("#file")[0].files.length; i++)< names.push($("#file")[0].files.item(i).name); >alert(names.join("\r\n"));

Пример:

Получить тип выбранного файла (MIME)

File.type возвращает MIMEтип файла.

alert($("#file")[0].files[0].type); /* или */ alert(document.getElementById("file").files[0].type);

Пример:

Типы всех выбранных файлов (multiple)

let names = []; for(var i = 0; i < $("#file")[0].files.length; i++)< names.push($("#file")[0].files.item(i).type); >alert(names.join("\r\n"));

Пример:

Получить размер выбранного файла

File.size возвращает размер файла в байтах.

Пример:

Размер всех выбранных файлов (multiple)

$('#btn').click(function() < let size = 0 for(var i = 0; i < $("#file")[0].files.length; i++)< size += $("#file")[0].files.item(i).type; >alert(size); >);

Пример:

Комментарии

Другие публикации

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

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

Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет.

Сборник jQuery приемов с textarea — получить содержимое, вставить значение, подсчет количества символов и строк и т.д.

Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений.

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

Источник