选择文件后显示图像

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>

希望这对您有所帮助...

选择文件后显示图像

Display image after selecting file

javascript

c#

asp.net

jquery

image-uploading