Получаем и выводим размер файла в javascript

Как узнать "размер файла javascript" - получим размер файлов в js несколькими способами с примерами! Как получить размер файла javascript по его адресу? Получаем вес файла по ссылке. js

Подробно о получении размера файла.

1. Получаем размер файла из input.
2. Пример получения размера файла из input.
3. Получим размер файла по его адресу/ссылке!

1. Получаем размер файла из input.

Для того, чтобы получить "размер файла из input" вам потребуется:

Html:

Тег form.

Внутрь помещаем input с типом - type="file".

javascript:

Перейдем к скрипту: используем addEventListener, с атрибутом change.

uploading.addEventListener("change", (event) => {

Обратимся к загруженному файлу:

alert(uploading.files[0]

Определим размер файла с помощью size добавим слово "байт" - потому, что это будут байты...

Выведем с помощью alert :

alert(uploading.files[0].size + 'байт');

И если интересно, то давайте байты переведем в Кбайты, округлим до десятых с помощью toFixed.

Соберем весь код:

Код получения размера файла при загрузке в input.

Html

<form>

<input type="file" id="uploading">

</form>

javascript

<script>

uploading.addEventListener("change", (event) => {

alert(uploading.files[0].size + "байт");

alert( (uploading.files[0].size / 1024) . toFixed(2) + "Кбайт");

});

</script>

2. Пример получения размера файла из input.

Чтобы увидеть живой пример нужно выбрать любой файл по кнопке и после этого вы получите размер файла при загрузке!

3. Получим размер файла по ссылке!

Для того, чтобы получить размер файла по его адресу с помощью javascript - вам понадобится:

Html:

Создадим div с id, в который будем отправлять с помощью innerHTML полученный "размер файла".

<div id="id_div"></div>

javascript:

Возьмем вот эту картинку :

https://jsphp.ru/_data/logo/logo_for_logo.png

Используем так много, что только перечисление займет полдня, поэтому сразу перейдем к коду:

Код получения размера файла по его ссылке:

Html:

<div id="id_div"></div>

javascript:

<script>

var url= "https://jsphp.ru/_data/logo/logo_for_logo.png";

var req = new XMLHttpRequest();

req.open("GET", url, false);

req.send();

id_div. innerHTML = (req.getResponseHeader('content-length'));

</script>

Пример получения размера файла по его ссылке:

Разместим выше приведенный код "получения размера файла по его ссылке" - прямо здесь:

Это размер в байтах.

Ну и просто для интереса...

Добавим html :

<div id="id_div2"></div>

Используем опять toFixed + добавим килобайты...

id_div2. innerHTML = ( req.getResponseHeader('content-length') / 1024 ) . toFixed(2) + " Кбайт" ;

Смотрим пример получения размера файла в килобайтах!

Смотрим, что получилось:

Всего комментариев : Comments+ 2.0

+ =