Форум

Devil198711 · #1 (**permalink**) 28.04.2016, 01:24

Ситуация такая:
Реализую загрузку аватаров, нужно сделать так чтобы после выбора изображения пользователе появлялась превью Аватара. Пока есть такой код:
function selectAva() {
var doc = document;
var typefile = doc.getElementById('file').files[0].type;
if (typefile != 'image/png' && typefile != 'image/jpeg') {
doc.getElementById('error').innerHTML = '<span class="errors_aut">Не правильный тип изображения!</span><br><br>';
} else {
doc.getElementById('error').innerHTML = '';
doc.getElementById('prevava').innerHTML = '<img src="'+Что вставить сюда?+'">';
}
}

Decode · #2 (**permalink**) 28.04.2016, 03:36

Devil198711,

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    #preview img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <input id="upload" type="file" />
  <div id="preview"></div>
  
  <script>
    (function() {
      var inpElem = document.getElementById('upload'),
          divElem = document.getElementById('preview');
      
      inpElem.addEventListener("change", function(e) {
          preview(this.files[0]);
      });
      
      function preview(file) {
        if ( file.type.match(/image.*/) ) {
          var reader = new FileReader(), img;
          
          reader.addEventListener("load", function(event) {
            img = document.createElement('img');
            img.src = event.target.result;
            divElem.appendChild(img);
          });
          
          reader.readAsDataURL(file);
        }
      }
    })();
  </script>
</body>
</html>

laimas · #3 (**permalink**) 28.04.2016, 06:50

Decode, высоту лучше автоматом задавать от заданной ширины, иначе искажения могут быть.

Форум

Справочник

Discord чат

Курсы javascript