FileInput

by hollanditkzn

HTML

<div>
  <label>
    <img src="https://d2t44wh9rnwl5y.cloudfront.net/gsc/WOT4J7/7c/af/6a/7caf6afbcea7443a968fe84ba65d34f7/images/%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-_%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F/u1503.png?token=eb8cfc644bd243f23782f9a5bb28375e" alt="">
    <span>Загрузить файл</span>
    <input type="file" accept='.png, .jpeg, .jpg'>
  </label>
</div>

CSS

input {
  display: none;
}
img{
  width: 87px;
  height: 97px;
}

JavaScript

function upladFile(input){
	if(input.files && input.files[0]){
  	let reader = new FileReader();
    
    reader.onload = (e) => {
    	$('img').attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
    
  }
}

$('input').change(function() {
  $('span').remove();
  upladFile(this);
})