Предпросмотр изображения при загрузке в input type=“file”

#jquery #html #css

Пробую сделать предварительный просмотр изображения при загрузке в input type="file"
На stackoverflow есть примеры решения этой задачи
Но у меня код оттуда не работает http://jsfiddle.net/YJG79/9/ 



function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#image').attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInput").change(function() {
  readURL(this);
});
.input-file-row-1:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.input-file-row-1 {
  display: inline-block;
  margin-top: 25px;
  position: relative;
}
html[xmlns] .input-file-row-1 {
  display: block;
}
* html .input-file-row-1 {
  height: 1%;
}
.upload-file-container {
  position: relative;
  width: 100px;
  height: 137px;
  overflow: hidden;
  background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
  float: left;
  margin-left: 23px;
}
.upload-file-container:first-child {
  margin-left: 0;
}
.upload-file-container > img {
  width: 93px;
  height: 93px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.upload-file-container-text {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #719d2b;
  line-height: 17px;
  text-align: center;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 35px;
}
.upload-file-container-text > span {
  border-bottom: 1px solid #719d2b;
  cursor: pointer;
}
.upload-file-container input {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 1px;
  opacity: 0;
  filter: alpha(opacity=0);
  margin: 0;
  padding: 0;
  border: none;
  width: 70px;
  height: 50px;
  cursor: pointer;
}

  

    

      

        
        
	Add
photo

          
        
      
    
  





Помогите разобраться в чем причина.
    

Ответы

Ответ 1

jquery сбоку на jsfiddle подключи и выставь No wrap - in 
http://jsfiddle.net/YJG79/16/ - все работает
@Heidel, Вот форма http://rghost.ru/49770076, она работает на всех инпутах, как ты
и просил. Я там совсем чуток html изменил и немного чистого js добавил. Немного рагульно
получилось, так как на скорую руку делал, но это не сверхважно. Главное разберись с
тем кодом. Там все просто.


Ответ 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: 8em;
  height: 8em;
  background: silver;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

input {
  display: none;
}






PS: Из https://ru.stackoverflow.com/a/594663/178988