Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
                        
                        4年前关闭。
                                                                                            
                
        
我正在尝试在通过JavaScript输入的文件中显示选定的图像。这是我使用的代码,如下所示:

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


我使用此文件输入来上传图像,但不知道选择图像时如何显示所选图像?
使用JS完成上传后,如何显示它?

最佳答案

试试这个方法:

<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>


希望这可以帮助...

09-25 17:30
查看更多