How to make an image preview? For example, like in vk.com?

Question

Yii

Hello,
in VK when uploading pictures, they first line up hardly on the page without going. I want to do similar behavior with this scenario:
Yii2,
- product creation page, model not created yet. The page has a dropzone for loading images asynchronously. But if you upload an image on a product that has not been created, then it will not have the id of the product to which it belongs, i.e. there will be no contact with him. You have to make crutches with a temporary id.
You can save, for example, in the browser's storage, but the pictures can be large..
How do you do this kind of image loading correctly?

Answer 1

If I understand correctly, then something like this.
finish it to your needs, everything is simple here.

$('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]);
    }
  };