Display selected image from input file

Question

my question is how to display the selected file image from the input file in img tag, I have described the code below.

<img src="" width="200" height="100">
<input type="file" name="logo" id="upload-logo" />

$('#upload-logo').on('change', function(){
    let logo = $(this).val();
    $('img').attr('src', logo);
});

but the result I got after changing the src attribute is: Not allowed to load local resource: file: /// C: /fakepath/Capture.PNG, and photos are not displayed

I do not want to use ajax

this answers the question perfectly. https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Eli, Sep 16 '19 at 15:55
Possible duplicate of [Preview an image before it is uploaded](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — Eli, Sep 16 '19 at 15:55

score 0 · Accepted Answer · answered Sep 16 '19 at 15:59

You must use the file reader to validate and allow preview of the uploaded image. the browser disallows the access to local system files for good reason and the file inputs place files in a temporary folder system that the browser is allowed to access.

Here is an example of how to use the File Reader Source

    const reader = new FileReader();

    reader.onload = function(e) {
        // do something with the result
        var file = reader.result || e.target.result;
    }
    reader.readAsDataURL(input.files[0]);

Thanks for your answer, it is what I expected. – newsshare24h Sep 17 '19 at 01:59 — newsshare24h, Sep 17 '19 at 01:59

Display selected image from input file

1 Answers1

Linked