在许多输入中加载和预览图像

Question

我有一个带有 4 个输入的表单来加载图像并预览它们。下面的脚本有效，但仅适用于第一次输入

<input type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="previewFile(event);" value="img/<?echo $row['zdjecie'];?>" style='display: none;'/>

    function previewFile() {
    const preview = document.getElementById('img-new-1'); 
    const file = document.getElementById('images-upload-1').files[0];
    const reader = new FileReader();

    reader.addEventListener("load", function () 
          {
            // convert image file to base64 string
            preview.src = reader.result;
          }, false);

    if (file) 
        {
          reader.readAsDataURL(file);
        }
};

有什么建议吗？

Answer 1

我更改了你的代码：

我在每个文件输入中添加了一个 data-img，这样它就可以通过它的 id 绑定到一个 img。然后我更新了预览功能以使用传递的事件 e 来使用已更改的输入而不是直接引用单个 ID。

function previewFile(e) {
    const preview = document.querySelector(e.target.dataset.img); 
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.addEventListener("load", function () 
          {
            // convert image file to base64 string
            preview.src = reader.result;
          }, false);

    if (file) 
        {
          reader.readAsDataURL(file);
        }
};

<input data-img="#img-new-1" type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="previewFile(event);" value="img/"/>

<input data-img="#img-new-2" type="file" id="images-upload-input-2" accept=".png, .jpg, .jpeg" name="image_2" onchange="previewFile(event);" value="img/"/>

<img id="img-new-1">
<img id="img-new-2">

在许多输入中加载和预览图像

Load and preview images in many inputs

javascript

image

input

filereader