Как добавить предпросмотр загруженного изображения?

Question

[Сергей]

Здравствуйте, хотел сделать форму загрузки максимально удобной. Так вот, появилась потребность в отображении загружаемого изображения пользователя.

Много гуглил, но увы один хард на js.
Можно это сделать как-то максимально легко и быстро, а если можно то как?

HTML

<p><label for="load-avatar" class="load-avatar" style=""><img src="/source/logo.png"></label>
<p><input style="position: absolute; opacity: 0; z-index: -1;" type="file" name="avatar" id="load-avatar">

Буду очень благодарен хоть за любую подсказку!

Answer 1

[quake4fun]

Можно показывать без загрузки на сайт:

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>

var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };

А уж потом обрабатывать на PHP изображение, если пользователю нравится.