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

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

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

<input id="file" type="file" name="file">
HTML

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

<input id="file" type="file" name="file[]" multiple>
HTML
$("#file").val(null);

/* или */
document.getElementById("file").value = null;
JS

Пример:

if ($("#file").val() == ''){
	alert("Файл не выбран");
} else {
	alert("Файл выбран");
}

/* или */
if (document.getElementById("file").value == ''){
	alert("Файл не выбран");
} else {
	alert("Файл выбран");
}
JS

Пример:

$('#btn').click(function(){
	alert($("#file")[0].files.length);
});

/* или */
$('#btn').click(function(){
	alert(document.getElementById("file").files.length);
});
JS

Пример:

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

alert($("#file")[0].files[0].name);

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

Пример:

Имена всех выбранных файлов (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"));
JS

Пример:

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

alert($("#file")[0].files[0].type);

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

Пример:

Типы всех выбранных файлов (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"));
JS

Пример:

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

alert($("#file")[0].files[0].size);
JS

Пример:

Размер всех выбранных файлов (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);
});
JS

Пример:

08.09.2022
271

Комментарии

, чтобы добавить комментарий.

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

Загрузка файлов на сервер PHP
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
53782
+20
Загрузка изображений с превью AJAX + PHP + MySQL
В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных...
18019
+19
Автоматическое сжатие и оптимизация картинок на сайте
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
19295
+8
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
44537
+4
Работа с cookie в JavaScript
Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений...
29327
+7
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
30321
+31