Найти и передать атрибут Jquery

337

04 июня 2021, 13:10

Есть HTML разметка:

<input type="file" class="form-control" name="image">
<img src="" class="panel-image" alt="image">

Задача:

При выборе файла для input нужно получить его value и присвоить это значение тегу img в атрибут src.

Прошу помощи в реализации!

Answer 1

Если задумка в том, чтобы показать пользователю картинку, это можно реализовать так:

let img = document.querySelectorAll('.panel-image'); 
let input = document.querySelectorAll('.form-control'); 
 
for( let i = 0; i < input.length; i++ ){ 
  input[i].addEventListener('change', function(){ 
    let val = URL.createObjectURL( this.files[0] ); 
    img[i].src = val; 
    img[i].style.display = "block"; 
  }); 
}

.panel-image { 
  display: none; 
  max-width: 180px; 
  max-height: 180px; 
}

<input class="form-control" type="file" name="image"> 
<img  class="panel-image" src="" alt="image"> 
 
<br><br><br> 
 
<input class="form-control" type="file" name="image"> 
<img class="panel-image" src="" alt="image">

Answer 2

Получаем имя файла и записываем в src тега img:

$('input[type="file"]').on('change', function(e){
  var fileName = e.target.files[0].name;
  $('.panel-image').attr('src', fileName);
});

Создание интернет-магазина кофе и чая в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

getElementsByClassName + onclick на элемент полученной коллекции

Нужно чтобы при клике в браузере на слова "просто", "средне", "сложно" в div с классом result вставлялось значение + значение дата атрибутаСейчас...

243

javascript

Нахождение обьекта в WeakMap или WeakSet

Почему false? И как мне найти объект, если их будет много? Причем в Set() и Map() тоже самоеЕсли добавлять вместо объектов примитивные типы - то true

124

javascript

React и Spring приложение, webpack

Не получается сделать приложение Spring + React по туториалу https://springio/guides/tutorials/react-and-spring-data-rest/

javascript

Пытаюсь извлечь данные из результатов поиска, используя nightmare.js, но выдает ошибку: “Cannot read property 'click' of undefined”

Я пытаюсь решить это задание:

120