How can I show image that is selected to upload by user

Question

When the user is uploading an image file, I need to show the Image that the user wants to upload in the same form. How can I do that by using only javascript and css?

if you don't get what I meant here is an example go to page

in that page they have hidden the input and used the label for that input. but I have no idea on how to display that image there.

https://stackoverflow.com/questions/5802580/html-input-type-file-get-the-image-before-submitting-the-form — Tom, Oct 13 '19 at 10:13

score 1 · Accepted Answer · answered Oct 13 '19 at 11:07

$("#fu_upload").change(function () {
    var input = this;
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#Img_preview').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    });
    $('#btnClear').click(function()
    {
    
      $('#fu_upload').val(null);
      $('#Img_preview').attr('src', "http://placehold.it/100x100");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <input type='file' id="fu_upload" />
    <input type="button" value="clear" id="btnClear"/>
    <br/>
    <img id="Img_preview" src="http://placehold.it/100x100" alt="your image" />

How can I show image that is selected to upload by user

1 Answers1