У меня есть список типов файлов ввода, и он принимает только изображение. Как я могу просматривать изображения каждый раз, когда я добавляю один? используя метод onchange - PullRequest
Новая
       3

У меня есть список типов файлов ввода, и он принимает только изображение. Как я могу просматривать изображения каждый раз, когда я добавляю один? используя метод onchange

3 голосов
/ 15 февраля 2020

Я написал этот код и он работает, но когда я выбираю изображение, оно появляется только перед первым элементом. 

<html lang="en">
<head>
    <title>Change image on select new image from file input</title>
</head>
<body>
    <ul>
        <li>
            <input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
            <img class="output" width="100px" />
        </li>
        <li>
            <input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
            <img class="output" width="100px" />
        </li>
        <li>
            <input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
            <img class="output" width="100px" />
        </li>
    </ul>

<script type="text/javascript">
    var loadFile = function(event) {
        var output = document.getElementsByClassName('output')[0];
        output.src = URL.createObjectURL(event.target.files[0]);
    };
</script>

Я просто хочу, чтобы каждое изображение отображалось перед его входом.

Ответы [ 2 ]

2 голосов
/ 16 февраля 2020

вы перегружаете первый <img> элемент каждый раз, когда файл изменяется. Лучше найти <img> рядом с целевым элементом ввода: 

var loadFile = function(event) {
    var output = event.target.nextElementSibling;
    output.src = URL.createObjectURL(event.target.files[0]);
};

РЕДАКТИРОВАТЬ: включить в свой вопрос в комментарии

Для создания новых input элементов в JS и реализовать то же поведение, что и для других элементов input, вам нужно будет создать не только элемент ввода, но и весь узел li, как структуру существующего html, и добавить его к ul в DOM. Обратите внимание, что если структура html изменится, nextElementSibling может не найти соответствующий тег img. 

<script type="text/javascript">

    var loadFile = function(event) {
        var output = event.target.nextElementSibling;
        output.src = URL.createObjectURL(event.target.files[0]);
    };

    const input = document.createElement('INPUT'); 
    input.type = 'file'; 
    input.accept = '.png, .jpg, .jpeg'; 
    input.onchange = loadFile;

    const img = document.createElement('IMG'); 
    img.width = '100';

    const li = document.createElement('LI'); 
    li.appendChild(input);
    li.appendChild(img);

    const ul = document.querySelector('ul');
    ul.appendChild(li);

</script>
0 голосов
/ 16 февраля 2020

С помощью Jquery вы можете добавить столько данных, сколько хотите. 

<html lang="en">

<head>
  <title>Change image on select new image from file input</title>
</head>

<body>
  <ul>
    <li>
      <input type="file" accept=".png, .jpg, .jpeg">
      <img class="output" width="100px" />
    </li>
    <li>
      <input type="file" accept=".png, .jpg, .jpeg">
      <img class="output" width="100px" />
    </li>
    <li>
      <input type="file" accept=".png, .jpg, .jpeg">
      <img class="output" width="100px" />
    </li>
  </ul>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    $("input[type=file]").on("change", function(e) {
      $(this).next().attr("src", URL.createObjectURL(e.target.files[0]));
    })
  </script>
...