如何显示用户选择上传的图像

Question

当用户上传图像文件时，我需要以相同的形式显示用户想要上传的图像。如何仅使用 javascript 和 css 来做到这一点？如果你不明白我的意思，这里是一个例子，转到页面在该页面中，他们隐藏了输入并使用了该输入的标签。但我不知道如何在那里显示该图像。

Answer 1

$("#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" />