Как управлять DOM на чистом JavaScript?
Управление DOM с помощью JavaScript в современных браузерах и IE 11+
В разметке ниже у нас есть два элемента, определенных разными id атрибутами. Элемент id="size" будет использоваться для отображения размера выбранного файла из элемента id="upload".
<input type="file" id="upload" />
<div id="size"></div>
Мы слушаем событие change у инпута файла и получаем выбранные файлы через e.target.files. Размер файла в байтах выбранного файла может быть получен из свойства size первого (и единственного) файла.
Элемент размера отображается или скрывается в зависимости от того, выбрал пользователь файл или нет.
// Query the elements
const fileEle = document.getElementById('upload');
const sizeEle = document.getElementById('size');
fileEle.addEventListener('change', function(e) {
const files = e.target.files;
if (files.length === 0) {
// Hide the size element if user doesn't choose any file
sizeEle.innerHTML = '';
sizeEle.style.display = 'none';
} else {
// File size in bytes
sizeEle.innerHTML = `${files[0].size} B`;
// Display it
sizeEle.style.display = 'block';
}
});
Показать читаемый размер
Есть место для улучшения вывода размера файла. Вместо отображения в байтах мы можем преобразовать его в читаемый формат в КБ, МБ, ГБ и ТБ в зависимости от его размера.
Для этой цели создан следующий вспомогательный метод formatFileSize:
// Convert the file size to a readable format
const formatFileSize = function(bytes) {
const sufixes = ['B', 'kB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sufixes[i]}`;
};
// Display the file size
sizeEle.innerHTML = formatFileSize(files[0].size);
Случай использования
Проверить размер файла перед загрузкой на сервер.
