Картинка с типом input=“file”

#ava { 
  display: none; 
} 
 
label { 
  cursor: pointer; 
}

<form method="post" action="" enctype="multipart/data"> 
  <label for="ava"><img src="http://zarablegko.ru/wp-content/uploads/2011/07/avatarki.jpg" width="100" /></label> 
  <input type="file" id="ava" name="ava" /><br /> 
  <input type="submit" value="Загрузить аву" /> 
</form>

document.querySelector("input").addEventListener("change", function () { 
  var fr = new FileReader(); 
 
  fr.addEventListener("load", function () { 
    document.querySelector("label").style.backgroundImage = "url(" + fr.result + ")"; 
  }, false); 
   
  fr.readAsDataURL(this.files[0]); 
});

label { 
  display: inline-block; 
  width: 4em; 
  height: 4em; 
  background: silver; 
  background-size: contain; 
} 
 
input { 
  display: none; 
}

<label for=pct></label> 
<input type=file id=pct>