Как сделать image preview? Например как в vk.com?

Question

[gerrrper]

Здравствуйте,
в вк при загрузке картинок, они сначала выстраиваются вряд на страничке, не отправляясь. Я хочу сделать похожее поведение с таким сценарием:
Yii2,
- страница создания товара, модель еще не создана. На странице есть dropzone для асинхронной загрузки картинок. Но если загружать картинку на не созданном товаре, то у нее не будет id товара, к которому она принадлежит, т.е. не будет связи с ним. Приходится делать костыли с временным id.
Можно сохранять например в хранилище браузера, но картинки могут быть больших размеров..
Как делают подобную загрузку изображений правильно?

Answer 1

[Facetrollex]

если я правильно понимаю, то как-то так.
допилите под свои нужды, тут все просто.

$('input[type=file]').on('change', function(){previewPhoto(this);});

function previewPhoto(inputPhoto)
  {
    var fileName = inputPhoto.files[0].name.toLowerCase();
    if (inputPhoto.files && inputPhoto.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('#user-avatar').attr('src', e.target.result);
      };
      reader.readAsDataURL(inputPhoto.files[0]);
    }
  };