Preview image before upload in php

Question

I am uploading image using php.

However, i want to see image preview of selected image before upload.

This is My form:

<form  enctype="multipart/form-data" id="fupForm" method="post">
  <input type="file" class="form-control" id="file" name="file" />
  <img class="basic-img" src="#"/>
</form>

I check the similar question Preview an image before it is uploaded But solution is not working for me

And what exactly does not work? Please describe it in details, and provide any screenshots if necessary. — sɐunıɔןɐqɐp, Jun 12 '18 at 07:40
This is my js code function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('.basic-img').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#file").change(function() { readURL(this); }); — Anuj Kumar, Jun 12 '18 at 07:47

score 0 · Accepted Answer · answered Jun 12 '18 at 07:51

Your Code which you mention in comment seems ok , if this is not working you can try it by calling function in onload

$(function() {
    $(":file").change(function() {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});
function imageIsLoaded(e) {
    $('.basic-img').attr('src', e.target.result);
};

It is working but can you please tell me what is the problem in my code — Anuj Kumar, Jun 12 '18 at 08:03

Preview image before upload in php

1 Answers1