Я хочу знать, может ли кто-нибудь помочь мне заменить ярлык <span>
, значок fa на изображение, при нажатии на значок fa вы должны открыть диалоговое окно, чтобы найти на моем компьютере любое изображение и поместить на него или замените его.
<body>
<div class="contentarea">
<section class="form_wrap">
<section class="cantact_info">
<section class="info_title">
<span class="fa fa-user-circle"></span>
<h4>FOTO</h4>
</section>
</section>
</section>
</div>
</body>
Такой простой Как делать это:
<body>
<input type="file" id="selectPicture" name="selectPicture">
<div class="contentarea">
<section class="form_wrap">
<section class="cantact_info">
<section class="info_title">
<label for="selectPicture"><span id="picture" class="fa fa-user-circle"></span></label>
<h4>FOTO</h4>
</section>
</section>
</section>
</div>
</body>
input[type=file] {
left: -99999;
display: none;
visibility: hidden;
position: absolute;
z-index: -99999;
}
var input = document.getElementById("selectPicture");
input.addEventListener("change", function(e) {
var picture = document.getElementById("picture");
var image = new Image(100, 100);
var reader = new FileReader();
reader.onload = function(e) {
image.src = e.target.result;
};
reader.readAsDataURL(e.target.files[0]);
image.onload = function() {
var newPicture = document.createElement('span');
newPicture.id = "picture";
newPicture.append(image);
picture.parentNode.replaceChild(newPicture, picture);
};
})
input[type="file] {
, но уже я остаюсь. – freshman 30.11.2019, 19:18input.addEventListener("change", function(e) {
, это поисков функционируй но в выбирать изображение jpg или png я не вижу, что я заменил ее, где ты думаешь, что - неудача? – freshman 30.11.2019, 19:59