选择文件后显示图像[关闭]

Question

我正在尝试通过 JavaScript 在文件输入中显示所选图像。这是我使用的代码如下所示：

<label id="lblFileUploadProfile">
<asp:FileUpload runat="server" ID="ImageProfileUpload"   />
<asp:Image runat="server" ID="ImgProfilePic" ImageUrl="img/user-5.png"  /> 

我使用此文件输入来上传图片，但不知道选择图片时如何显示所选图片？ 我如何在使用 JS 完成上传时显示它？

Answer 1

试试这个方法：

<img id="blah" class="photo" ImageUrl="img/user-5.png" />
<label for="imgInp" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i>Add Image
</label>
<input type='file' id="imgInp" name="image" />


<script>
//Preview & Update an image before it is uploaded
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function () {
        readURL(this);
    });
</script>


<style type="text/css">
input[type="file"] {
     display: none;
}

.custom-file-upload {
    border: 1px solid rgb(197, 197, 197);
    border-radius: 4px 4px 4px 4px;

    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    float: right;
    width: 5.25em;
    margin-left:200px;
}

.photo{
    width: 7em; 
    height: 9em; 
    border: 1px solid rgb(197, 197, 197); 
    border-radius: 4px 4px 4px 4px; 
    float:right;
}
</style>

希望这会有所帮助...