Показать изображение после выбора файла

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> 

Надеется, что это помогает ...