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

08.09.2022

9568

Сборник приёмов 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;

Пример:

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

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

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

Пример:

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

$('#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 возвращает размер файла в байтах.

alert($("#file")[0].files[0].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);
});