Вопросы Теги

заменить иконку фа изображением

Я хочу знать, может ли кто-нибудь помочь мне заменить ярлык <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>
1
задан 30.11.2019, 08:16
1 ответ

Такой простой Как делать это: 

<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);
  };
})
2
ответ дан 01.12.2019, 10:33
  • 1
    Превосходный, функционируй чуда. Только было нужна кавычка, чтобы закрывать в input[type="file] {, но уже я остаюсь. – freshman 30.11.2019, 19:18
  • 2
    на что он ссылается change в этой части input.addEventListener("change", function(e) {, это поисков функционируй но в выбирать изображение jpg или png я не вижу, что я заменил ее, где ты думаешь, что - неудача? – freshman 30.11.2019, 19:59
  • 3
    я это протестировал в chrome и firefox в моей команде и даже así он не делает мне изменение, я думаю, что немного в моем có я говорю, что он должен быть поврежденным, оставляю тебе одинокую ссылку, чтобы подтверждать, работает ли он правильно в твоей команде иначе он был бы моим. drive.google.com/open?id=13XbC_97j8zmPjEes6g0VY-MOLeiowDz5 надеялся, что ты смог показывать мне, ты функционирует ли мой có я говорю. – freshman 01.12.2019, 01:56
  • 4
    jsbin.com/mivavufoqe/1/edit?html,css,js,output не encontré как загружение fonts для того, чтобы видели в, как это у меня есть действительно – freshman 01.12.2019, 02:12
  • 5
    ты используешь тот же có я говорю, что envié или ты изменил что-то? уже проверьте пример, и если он меняет изображение на твой – freshman 01.12.2019, 02:26