Скрипт, определяющий вес фотографии и размер фотографии

@lupik · Регистрация: 06.03.2020

Author24 — интернет-сервис помощи студентам

Добрый день! можно ли на JavaScript узнать вес и размер фотографии, если установить скрипт в форму загрузки фото ?

krvsa · 22.06.2022, 10:09

Сообщение от lupik

можно ли на JavaScript узнать вес и размер фотографии, если установить скрипт в форму загрузки фото ?

Можно много чего узнать...

PHP/HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!--
-->
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
    $('input[type=file]').change(function(e) {
        var elem = $(this);
        var files = e.target.files;
        for (var i = 0, file; file = files[i]; i++) {
            console.log(file.size);
            var reader = new FileReader();
            reader.onload = function(theFile) {
                var image = new Image();
                image.onload = function() {
                    console.log(this.width + 'X' + this.height);
                };
                image.src = theFile.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
})
</script>
</head>
<body>
<form>
    <div class="upload">
        <input type="file" name="file"/>
        <label>Select a File:</label>
        <div id="logo-preview"></div>
    </div>
</form>
</body>
</html>

@Balanaar · 22.06.2022, 10:16

HTML5

1	<input type="file">

Javascript

const fileInput = document.querySelector('input[type="file"]');
fileInput.onchange = function() {
  const file = this.files[0];
  const image = new Image();
  image.src = URL.createObjectURL(file);
  image.onload = function() {
    console.log(file.size + ' байт; ' + this.width + 'x' + this.height);
  }
}

@Fart83 · 22.06.2022, 10:28

PHP/HTML

<form>
    <input type=file>
</form>
 
<script>
  let o = document.querySelector("input");
  o.onchange = ()=> readFile(o);
  
function readFile(o) {
  let file = o.files[0];
  let img = new Image();
  img.src = URL.createObjectURL(file);
  console.dir(img);
}
 
</script>

да, можно.

@Balanaar · 22.06.2022, 10:34

Fart83, только надо дождаться загрузки изображения

@Fart83 · 22.06.2022, 10:47

Сообщение от Balanaar

только надо дождаться загрузки изображения

это на сколько пк должен быть медленный, что после 2 буфера не может загрузить картинку с разрешением в 11к?

@Balanaar · 22.06.2022, 10:48

Fart83, а при чём здесь пк? Если изображение не в кеше, вы получите 0х0, каким бы быстрым ваш пк ни был.

@Fart83 · 22.06.2022, 10:52

Сообщение от Balanaar

Если изображение не в кеше

картинка в 11к погружается и нет проблем. ширина и высота выдается легко. и нет нулевых байтов.

@Balanaar · 22.06.2022, 11:03

Fart83, а теперь выберите изображение, которое вы ещё ни разу не выбирали

@Fart83 · 22.06.2022, 11:04

Сообщение от Balanaar

а теперь выберите изображение, которое вы ещё ни разу не выбирали

выбрал. создал картинку 12000*12000 размером в 10+мб, переименовал и сразу получил данные.

UPD ответ консоли с моим кодом

Javascript

1
2

FilelastModified: 1655884923511lastModifiedDate: Wed Jun 22 2022 13:02:03 GMT+0500 (Пакистан, стандартное время) {}name: "wef234f23f232323ff23rf.jpg"size: 13402883type: "image/jpeg"webkitRelativePath: ""[[Prototype]]: File
js.php:16 img

@Balanaar · 22.06.2022, 11:10

PHP/HTML

<form>
    <input type=file>
</form>
 
<script>
  let o = document.querySelector("input");
  o.onchange = ()=> readFile(o);
  
function readFile(o) {
  let file = o.files[0];
  let img = new Image();
  img.src = URL.createObjectURL(file);
  console.log(img.width, img.height);
}
 
</script>

А так что выдаст ваш сверхбыстрый пк?

@lupik · 23.06.2022, 09:26 **[ТС]**

krvsa, Добрый день! спасибо вам за ответ, это получается целую страницу надо менять ?

Добавлено через 17 минут
krvsa, Подскажите пожалуйста как подключить ? поменять имя,

CSS

 class

?

@lupik · 23.06.2022, 09:45 **[ТС]**

Вот что получается

Скрипт, определяющий вес фотографии и размер фотографии

krvsa · 23.06.2022, 10:05

lupik, я пока не понял про что ты спрашиваешь...

@lupik · 23.06.2022, 11:12 **[ТС]**

Мне нужно что бы если маленький размер фото то устанавливался флажок, атрибут

HTML5

checkbox

можно так сделать ?

krvsa · 23.06.2022, 11:27

lupik, т.е. какому-то checkbox сделать состояние checked?
Да, такое можно сделать.

Javascript

1	<ссылка_на_checkbox>.checked = true

krvsa 2976 / 1149 / 314 Регистрация: 14.03.2022 Сообщений: 2,806
	23.06.2022, 10:05	14
	lupik, я пока не понял про что ты спрашиваешь... 0

Скрипт, определяющий вес фотографии и размер фотографии

Решение

Решение

@lupik 0 / 0 / 0 Регистрация: 06.03.2020 Сообщений: 10
		1
	Скрипт, определяющий вес фотографии и размер фотографии 22.06.2022, 09:24. Показов 1955. Ответов 15 Метки нет (Все метки) Добрый день! можно ли на JavaScript узнать вес и размер фотографии, если установить скрипт в форму загрузки фото ? 0

@Balanaar 2454 / 1761 / 624 Регистрация: 11.07.2016 Сообщений: 4,051
	22.06.2022, 10:34	5
	Fart83, только надо дождаться загрузки изображения 1

@Fart83 321 / 189 / 78 Регистрация: 04.10.2016 Сообщений: 809
	22.06.2022, 10:47	6
	Сообщение от Balanaar только надо дождаться загрузки изображения это на сколько пк должен быть медленный, что после 2 буфера не может загрузить картинку с разрешением в 11к? 0

@Balanaar 2454 / 1761 / 624 Регистрация: 11.07.2016 Сообщений: 4,051
	22.06.2022, 10:48	7
	Fart83, а при чём здесь пк? Если изображение не в кеше, вы получите 0х0, каким бы быстрым ваш пк ни был. 0

@Fart83 321 / 189 / 78 Регистрация: 04.10.2016 Сообщений: 809
	22.06.2022, 10:52	8
	Сообщение от Balanaar Если изображение не в кеше картинка в 11к погружается и нет проблем. ширина и высота выдается легко. и нет нулевых байтов. 0

@Balanaar 2454 / 1761 / 624 Регистрация: 11.07.2016 Сообщений: 4,051
	22.06.2022, 11:03	9
	Fart83, а теперь выберите изображение, которое вы ещё ни разу не выбирали 0

@lupik 0 / 0 / 0 Регистрация: 06.03.2020 Сообщений: 10
	23.06.2022, 09:45 [ТС]	13
	Вот что получается 0