Проблема со скриптом получения аватарки пользователя через input

@Gvizl · Регистрация: 31.01.2014

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

Я написал скрипт, который получает из input файл, проверяет является ли файл картинкой и подходит ли он под указанные юзером размеры и вес.

В строке 119 в случае если ошибок проверки файла, скрипт приравнивает переменную аватарки к файлу из объекта, который создаёт ф-ция проверки файла. Проблема в том, что даже при наличии ошибок эта переменная заполняется файлом, притом в консоли объект с файлом будто принимает значение по-умолчанию. На скриншоте видно подробнее. Не могу понять в чём причина.

@Gvizl · 22.11.2019, 20:43 **[ТС]**

Скриншот

@Gvizl · 23.11.2019, 12:47 **[ТС]**

Извиняюсь, вот актуальная ссылка

@Gvizl · 23.11.2019, 12:53 **[ТС]**

И более явный скриншот с результатами

@shvyrevvg · 23.11.2019, 13:09

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

В строке 119 в случае если ошибок проверки файла, скрипт приравнивает переменную аватарки к файлу из объекта, который создаёт ф-ция проверки файла. Проблема в том, что даже при наличии ошибок эта переменная заполняется файлом, притом в консоли объект с файлом будто принимает значение по-умолчанию. На скриншоте видно подробнее. Не могу понять в чём причина.

Gvizl, Вы серьезно?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  Promise.all([
    backgroundPromise
  ]).then(results => {
    let background = results[0];
 
    if (background.file == undefined) {
      alert('Загрузите аватарку или обои!');
    }
    else {
      let errors = [];
 
      if (background.file == undefined) {
        background = undefined;
      } else {
        console.log(  background,'   background.check ');
        if (background.check == false) {
          console.log(  background.errors,'   background.errors');
          background.errors.forEach(error => errors.push(error));
        } else background = background.file;
      }
 
      console.log(background, 'errors, avatar, background' );
    }
  });

@Gvizl · 24.11.2019, 16:01 **[ТС]**

shvyrevvg, посмотрите версию кода и последний скриншот в последних постах, там я понятнее указал проблему.

@shvyrevvg · 24.11.2019, 16:35

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

посмотрите версию кода и последний скриншот в последних постах, там я понятнее указал проблему.

Gvizl, и? Вот код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  Promise.all([
    backgroundPromise
  ]).then(results => {
    let background = results[0]; // удивляетесь откуда в background данные results[0]?
 
    if (background.file == undefined) { // проверили на undefined
      alert('Загрузите аватарку или обои!');
    }
    else { // если не undefined
      let errors = [];
 
      if (background.file == undefined) { // хм, но может все-таки undefined
        background = undefined; 
      } else {
        console.log(  background,'   background.check ');
        if (background.check == false) {
          console.log(  background.errors,'   background.errors');
          background.errors.forEach(error => errors.push(error));
        } else background = background.file;
      }
 
      console.log(background, 'errors, avatar, background' );
    }
  });

@Gvizl · 24.11.2019, 18:48 **[ТС]**

Всё, поправил код. Не там искал проблему - просто в промисе у меня сразу был resolve, а надо было пихнуть его в событие, когда картинка загрузилась, а так ведь он сразу и брал объект с первоначальным состоянием.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег SCRIPT</title>
 </head>
 <body> 
<label for="myfile" class="chous">Выберите файлы</label>
<input type="file" id="file"  />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script type="text/javascript">
function checkFileImage(file) {
    let result = false;
    switch (file.type) {
        case "image/png":
        case "image/gif":
        case "image/bmp":
        case "image/jpeg":
            result = true;
            break;
    }
    return result;
}
 
function formatBytes(bytes, decimals) {
    if (bytes == 0) return '0 Bytes';
    var k = 1024,
        dm = decimals <= 0 ? 0 : decimals || 2,
        sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
        i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
 
 
function imageSizeCheck(file,
                               sizeParams = {
                                   widthMin: 0,
                                   widthMax: 0,
                                   heightMin: 0,
                                   heightMax: 0,
                                   prefixName: ''
                               },
                               sizeMaxBytes = 1000000 /*1000000 - 1mb*/) {
    if (file == undefined) return {file: undefined};
 
    return new Promise((resolve, reject) => {
        let result = {
                check: true,
                errors: [],
                file,
                filePreviewUrl: ''
            },
            reader = new FileReader();
 
        reader.onloadend = () => {
            if (checkFileImage(file)) {
                var img = new Image;
                img.src = reader.result;
                img.onload = function (e) {
                    if (sizeParams.hasOwnProperty('widthMax') && e.currentTarget.width > sizeParams.widthMax) {
                        result.errors.push(sizeParams.prefixName + 'Максимальная ширина изображения ' + sizeParams.widthMax + '\n');
                    }
 
                    if (sizeParams.hasOwnProperty('widthMin') && e.currentTarget.width < sizeParams.widthMin) {
                        result.errors.push(sizeParams.prefixName + 'Минимальная ширина изображения ' + sizeParams.widthMin + '\n');
                    }
 
                    if (sizeParams.hasOwnProperty('heightMax') && sizeParams.heightMax > 0 && e.currentTarget.height > sizeParams.heightMax) {
                        result.errors.push(sizeParams.prefixName + 'Максимальная высота изображения ' + sizeParams.heightMax + '\n');
                    }
 
                    if (sizeParams.hasOwnProperty('heightMin') && e.currentTarget.height < sizeParams.heightMin) {
                        result.errors.push(sizeParams.prefixName + 'Минимальная высота изображения ' + sizeParams.heightMin + '\n');
                    }
 
                    if (file.size > sizeMaxBytes) {
                        result.errors.push(sizeParams.prefixName + 'Максимальный вес ' + formatBytes(sizeMaxBytes) + '\n');
                    }
 
                    if (result.errors.length > 0)
                        result.check = false;
                    else
                        result.filePreviewUrl = reader.result;
                        
                    resolve(result);
                };
            } else {
                result.check = false;
                result.errors.push(sizeParams.prefixName + 'Файл должен быть картинкой.' + '\n');
                resolve(result);
            }
        };
 
        reader.readAsDataURL(file);
    });
}
 
 
 
function handleFileSelect(evt) {
    var file = evt.target.files[0]; 
    
  
    let backgroundPromise = imageSizeCheck(
    file,
        {
            widthMax: 250,
            heightMax: 500,
            prefixName: 'Ошибка файла "Обои": '
        }
    );
 
  Promise.all([
    backgroundPromise
  ]).then(results => {
    let background = results[0];
 
    if (background.file == undefined) {
      alert('Загрузите аватарку или обои!');
    }
    else {
        let errors = [];
        if (background.check == false) background.errors.forEach(error => errors.push(error)); else background = background.file;
        
        console.log(background, ' background end' );
    }
  });
}
  
document.getElementById('file').addEventListener('change', handleFileSelect, false);
  </script>
 </body>
</html>

https://jsfiddle.net/BossBossEx/e2yhjm03/

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 472

	Проблема со скриптом получения аватарки пользователя через input 22.11.2019, 20:42. Показов 588. Ответов 7 Метки нет (Все метки) Я написал скрипт, который получает из input файл, проверяет является ли файл картинкой и подходит ли он под указанные юзером размеры и вес. В строке 119 в случае если ошибок проверки файла, скрипт приравнивает переменную аватарки к файлу из объекта, который создаёт ф-ция проверки файла. Проблема в том, что даже при наличии ошибок эта переменная заполняется файлом, притом в консоли объект с файлом будто принимает значение по-умолчанию. На скриншоте видно подробнее. Не могу понять в чём причина. 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 472
	22.11.2019, 20:43 [ТС]
	Скриншот Миниатюры 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 472
	23.11.2019, 12:47 [ТС]
	Извиняюсь, вот актуальная ссылка 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 472
	23.11.2019, 12:53 [ТС]
	И более явный скриншот с результатами Миниатюры 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 472
	24.11.2019, 16:01 [ТС]
	shvyrevvg, посмотрите версию кода и последний скриншот в последних постах, там я понятнее указал проблему. 0