Картинка с типом input=“file”

#javascript #html #jquery #css

Доброго времени суток, есть задача.

Есть картинка(аватарка) при нажатии на неё, нужно вызывать input="file" что бы подгружать
картинку и менять аватарку, не хочется велосипедить с JS и jQuery может есть другое
решение?
    

Ответы

Ответ 1

Если Вам только стилизовать input type=file, то вот, например:



#ava {
  display: none;
}

label {
  cursor: pointer;
}

  
  

  





Но саму загрузку на сервер без php или nodejs реализовать нельзя.


Ответ 2

По идее, надо загружать на сервер. Но для остального можно использовать что-то такое:



document.querySelector("input").addEventListener("change", function () {
  if (this.files[0]) {
    var fr = new FileReader();

    fr.addEventListener("load", function () {
      document.querySelector("label").style.backgroundImage = "url(" + fr.result + ")";
    }, false);

    fr.readAsDataURL(this.files[0]);
  }
});
label {
  display: inline-block;
  width: 4em;
  height: 4em;
  background: silver;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

input {
  display: none;
}






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