JavaScript Upload Image. Загрузка и отображение изображения #shorts #javascript #htmlcss #frontend

Привет!📢

🔥JavaScript Upload Image. Загрузка и отображение изображения🔥

Ваша обратная связь обязательна =)

Также смотри на канале курс Frontender[1.0] который разделен на 3 модуля:
1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков);
2) JavaScript, решение задач, написание нескольких приложений;
3) React, Typescript, Redux написание полноценного приложения;

НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :)
Желаю приятного обучения! 🔥

Также тебе могут быть полезны эти уроки:

FRONTENDER[1.0] полный, структурированный и бесплатный курс по фронтенд разработке на Youtube.

📢 Автор курса: Дмитрий Колотильщиков
#html #frontend #frontender

[rahim]

Фантастика просто автору огромное спасибо. Примерно вот так и работают конструкторы

[awenn]

Короткий ответ пока не посмотрел шортс, инпут тайп файл, после js событие на onchange, далее файл ридер as data url и потом base64 кидаем на фон или создаём картинку

Помню когда ток js учил делал что то подобное для диплома заказчика

[zxcWeb]

Стоит учесть что картинка, а точнее ее ссылка конвертируется в формат database64, тем самым вес ссылки может достигать нескольких мб, что при мнодественном выборе файлов будет влиять на производительность, но в целом вариант очень простой и для отображения немногих картинок подойдет

[RadexStonder]

В стародавние времена мы просто src подставляли в img.

[ani]

А теперь выносим в класс и создаем подключаемый модуль)

[yurypetukhou]

Эй братишка, длина должна массива быть более 0 оговорочка тебя :) В целом видос отличный

[urunov-fedya]

В вашем случае не event.target.files, а e.target.files

[raminnasraddinzadeh]

Тут паратмер в скобке указан как "е", а дальще в самой фунции как "event"

[ИероглифСтёршийся]

Нифига не андерстенд. Можете на рушан транслейтнуть?

[vladimirpospelov]

То есть получается что если приложение будет большое, эти константы наверху разрастутся с двух до сотен?

[nielome]

Всё круто.
Вопросик: а почему для удобства не подключил js?

[katerynabalabushkina]

Например есть блог. Делаем страницу по добавлению текста и фото. Как отобразить его на другой странице?

[hyller-vt]

помогите пж у меня изображение не показывается на странице!

[prettyone]

document.addEventListener('DOMContentLoaded', function() {
const imgUl =
const imgPv =
imgUl.addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
let img =
img.src = e.target.result;
imgPv.innerHTML = '';
imgPv.appendChild(img);
};
reader.readAsDataURL(file);
});
});

[vunrapt]

А зачем в функции обработчике добавлять async?

[smith-dev]

Ужасный код, чел видимо накопировал со стэка