Проблема со скриптом получения аватарки пользователя через 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/

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

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

	Проблема со скриптом получения аватарки пользователя через input 22.11.2019, 20:42. Показов 615. Ответов 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