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

Question

当用户上传图像文件时，我需要以相同的形式显示用户想要上传的图像。如何仅使用 javascript 和 css 来做到这一点？

如果你不明白我的意思，这里是一个例子，转到页面

在该页面中，他们隐藏了输入并使用了该输入的标签。但我不知道如何在那里显示该图像。

Answer 1

$("#fu_upload").change(function () {&nbsp; &nbsp; var input = this;&nbsp; &nbsp; &nbsp; &nbsp; if (input.files && input.files[0]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onload = function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#Img_preview').attr('src', e.target.result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(input.files[0]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; $('#btnClear').click(function()&nbsp; &nbsp; {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; $('#fu_upload').val(null);&nbsp; &nbsp; &nbsp; $('#Img_preview').attr('src', "http://placehold.it/100x100");&nbsp; &nbsp; });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>&nbsp; &nbsp; <input type='file' id="fu_upload" />&nbsp; &nbsp; <input type="button" value="clear" id="btnClear"/>&nbsp; &nbsp; <br/>&nbsp; &nbsp; <img id="Img_preview" src="http://placehold.it/100x100" alt="your image" />