图像标签未使用 JS 获取 src 属性

Question

我正在尝试使用 <input type="file"/> 从用户那里获取文件。可以上传多个文件。上传后，我使用了我在堆栈上找到的这段代码，它允许我显示上传的图像。最初的代码是上传一张图片并显示它。

对于多重显示，我尝试克隆主 div 元素并为其分配一个新 ID，并使用 FileReader 对象尝试将 src 分配给图像标签。这是我的代码。

HTML代码：

<div id="picsContainer" style="display:flex;">
  <div style="display:none;" id="showPic">
    <img class="file-upload-image" src="#" id="imgTag0" alt="your image" />
    <div class="image-title-wrap">
      <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title"> Image</span></button>
  </div>
</div>
</div>

JS代码：

function previewImage(element){
    if(element.files[0]){
        console.log(element)
        for(i=0;i<element.files.length;i++){
        var main=document.getElementById("showPic");
            var cloned=main.cloneNode(true)
            const reader = new FileReader();
            console.log(reader)
            reader.readAsDataURL(element.files[i])
            cloned.id="showPic"+i;
            cloned.children[0].id=i;
            reader.onload=()=>{
                cloned.children[0].src=reader.result;
            }
            cloned.style.display="block";
            document.getElementById("picsContainer").appendChild(cloned);
        }
}
}

该函数在使用 onchange 上传图像时被调用。问题在于，在此代码中，只有最后添加的克隆元素显示图像预览，而在此之前的所有其他元素甚至都没有在其 src 属性中获取任何内容。它只是在 src 属性中显示一个“#”。

我做错了什么？

FileList {0: File, 1: File, 2: File, length: 3}
0: File {name: 'Screenshot (4).png', lastModified: 1633166516919, lastModifiedDate: Sat Oct 02 2021 14:51:56 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 716548, …}
1: File {name: 'Screenshot (5).png', lastModified: 1633166527063, lastModifiedDate: Sat Oct 02 2021 14:52:07 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 511571, …}
2: File {name: 'Screenshot (6).png', lastModified: 1633166534410, lastModifiedDate: Sat Oct 02 2021 14:52:14 GMT+0530 (India Standard Time), webkitRelativePath: '', size: 649065, …}
length: 3

如果我在控制台 element.files 中记录 element.files，这就是我所看到的

Answer 1

在我看来，您可能正在覆盖图像数组，但如果不查看您的其余代码，我不能肯定地说。

我的建议是不要克隆 div，映射图像数组并根据需要创建组件。

也许是这样的（ES6）：

const previewImage = (element) => {
 const container = document.GetElementById('picsContainer')
 const reader = new FileReader();
 return element.files.map((image, index) => {
  // Create a new div
  const newElement = document.createElement('div')
  newElement.key = index
  newElement.id = `showPic${index}`
  newElement.style.display = 'block'
  // Create the image component
  const img = document.createElement('img')
  newElement.appendChiled(img)
  reader.readAsDataURL(image)
  reader.onload = () => {
   img.src = reader.result;
  }
  container.appendChild(newElement)
 }
}

这应该可行，但如果您遇到任何错误，请告诉我，我会再次尝试帮助您。此外，除了使用文件 reader，您还可以为每个新图像创建一个 blob 并为它们获取自定义 url。

更新

由于你的 FileList 是一个对象，每个文件键都是一个数字，最后是一个长度，你可以这样调整我的解决方案：

const previewImage = (element) => {
 const container = document.getElementById('picsContainer')
 for (let i=0; i<element.files.FileList.length; i++){
 const reader = new FileReader();
  // Create a new div
  const newElement= document.createElement('div')
  newElement.key = i
  newElement.id = `showPic${i}`
  newElement.style.display = 'block'
  // Create the image component
  const img = document.createElement('img')
  newElement.appendChild(img)
  reader.readAsDataURL(element.files.FileList[i])
  reader.onload = () => {
   img.src = reader.result;
  }
  container.appendChild(newElement)
 }
}

我将保留原来的解决方案，因为它应该适用于一组文件。

图像标签未使用 JS 获取 src 属性

Image tag not getting src attribute using JS

html

javascript

filereader