1

есть такое дело, при нажатии на (добавить фото (input file)) должно появится выбранное фото(неважно где), а при следующих нажатии следующие выбранные фото (можно как input file), есть у меня один вариант но оно отображает выбранное фото и при повторном добавлении меняет фото на текущую, вместо добавлении нового. и плюс к этому мой код на jquery вместо javascript

<div class = "count">
<img class="blah" src="">
<input type='file' class="imgInp">
<div class = "add-ph">Добавить фото</div>
</div>


.count{
    border: 1px solid grey;
    min-height: 150px;
    border-radius: 5px;
    width: 100%;
    padding-left: 20px;
    display: flex;
    align-items: center;
}
.add-ph{
    width:140px;
    height: 70px;
    background-color: silver;
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    transition: 0.3s;
}
.add-ph>input{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.blah{
    width: 100px;
    height: 100px;
    margin-right: 25px;
    display: none;
}

.add-ph:hover{
    cursor: pointer;
}


function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('.blah').attr('src', e.target.result);
      $('.blah').show()
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$(".imgInp").change(function() {
  readURL(this);
});
2
  • так добавьте свой пример реализации на JQ, будёт с чего отталкиваться
    – GGO
    Commented 30 дек. 2020 в 9:40
  • @GGO добавил, можете посмотреть Commented 30 дек. 2020 в 9:53

1 ответ 1

2

Что-то такое хотели?

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      let foto = document.createElement("img");
      $(foto).attr('src', e.target.result);
      $(foto).attr('class', "blah");
      $(".count").prepend(foto);
      $(foto).show()
    }      
    reader.readAsDataURL(input.files[0]);
  }
}

$(".imgInp").change(function() {
  readURL(this);
});
.count{
    border: 1px solid grey;
    min-height: 150px;
    border-radius: 5px;
    width: 100%;
    padding-left: 20px;
    display: flex;
    align-items: center;
}
.add-ph{
    width:140px;
    height: 70px;
    background-color: silver;
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    transition: 0.3s;
}
.add-ph>input{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.blah{
    width: 100px;
    height: 100px;
    margin-right: 25px;
    display: none;
}

.add-ph:hover{
    cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "count">
  <input type='file' class="imgInp">
  <div class = "add-ph">Добавить фото</div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.