我有一个输入类型文件列表，它只接受图像。每次添加图像时如何查看图像？使用 onchange 方法

Question

我编写了这段代码及其工作原理，但是当我选择图像时，它只出现在第一个元素的前面。

<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>

我只希望每个图像都出现在其输入的前面。

Answer 1

使用 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>

Answer 2

每次文件更改时，您都会在第一个 <img> 元素上超载。最好在目标输入元素旁边找到 <img>：

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

编辑：在评论中包含您的问题

要在 JS 中创建新的 input 元素并实现与其他 input 元素相同的行为，您不仅需要创建输入元素，还需要创建整个 li 节点就像现有的 html 的结构一样，并将其附加到 DOM 中的 ul。注意如果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>

我有一个输入类型文件列表，它只接受图像。每次添加图像时如何查看图像？使用 onchange 方法

I have a list of inputs type file and it accept image only .. How can i view an image every time i add one? using onchange method

html

javascript

image

onchange