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

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

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

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

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

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

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

Пример:

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

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

Пример:

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

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

Пример:

4

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

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

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

Пример:

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

Пример:

5

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

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

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

Пример:

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

Пример:

6

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

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

Пример:

$('#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
9469

Комментарии

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

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

Загрузка файлов на сервер PHP
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
72071
+22
Загрузка изображений с превью AJAX + PHP + MySQL
В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных...
31116
+22
Автоматическое сжатие и оптимизация картинок на сайте
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет...
28369
+8
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
53400
+3
Работа с cookie в JavaScript
Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений...
56855
+9
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43537
+34