css 如何在选择文件时显示不同的文件？

cyej8jka 于 11个月前发布在其他

关注(0)|答案(3)|浏览(105)

<div class="selected-file-container align-items-center justify-content-between d-none">
  <div class="selected-file d-flex align-items-center">
     <img id="selectedImage" class="hidden" src="" alt="Selected Image"/>
     <span id="selectedFileName">Filename.jpg</span>
  </div>
  <span>1 MB</span>
</div>
<input type="file" id="fileInput" style="display: none" />
<label for="fileInput" class="choose-file-btn">
  <span>Choose File</span>
</label>

字符串
在这里，我用HTML和Bootstrap设计了一个图像选择按钮，以及一个可以在所选图像名称旁边放置图标的区域。

<script>
  document.getElementById("fileInput").addEventListener("change", function (event) {
    const selectedFile = event.target.files[0];
    const selectedImageElement = document.getElementById("selectedImage");
    const selectedFileNameElement = document.getElementById("selectedFileName");
    const selectedFileContainer = document.querySelector(".selected-file-container");
    if (selectedFile) {
      const imageIconElement = document.createElement("i");
      imageIconElement.className = "fa-regular fa-image";
      selectedFileNameElement.innerHTML = "";
      selectedFileNameElement.appendChild(imageIconElement);
      selectedFileNameElement.insertAdjacentHTML("beforeend", selectedFile.name);
      selectedImageElement.src = URL.createObjectURL(selectedFile);
      selectedFileContainer.classList.remove("d-none");
      selectedFileContainer.classList.add("d-flex");
    } else {
        // Dosya seçilmediyse selected-file-container'ı gizle
        selectedFileContainer.classList.remove("d-flex");
        selectedFileContainer.classList.add("d-none");
      }
  });
</script>

型
下面是我的脚本代码，我用脚本选择一个图像，当图像被选中时，我将图像图标添加到selectedFileContainer中，只添加所选图像的名称（我不显示图像，而是使用图标）。
我想做的和我不能做的是：假设用户选择了一个图像，设它为x.jpg。在包含selectedFileContainer类的容器中，有一个图标和它旁边所选图像的名称。当用户选择第二个图像时，假设它是y.jpg。它覆盖了名称x.jpg。我试图做的是，每当用户添加新图像时，将selectedFileContainer一个列在另一个下面。最后选择的任何内容都放在底部。让它们排成一行在按钮的上方，一块块的

的数据

的
当选择不同的图像时，只有名称在同一个容器中发生变化，如图像中所示。相反，创建所选文件容器，其中所选图像的名称一个在另一个下面。

css

来源：https://stackoverflow.com/questions/77721880/how-can-i-show-different-files-one-under-the-other-when-selecting-a-file

3条答案

按热度按时间

r1wp621o1#

为每个文件创建单独的容器

document.getElementById("fileInput").addEventListener("change", function (event) {
    const files = event.target.files;
    const filesContainer = document.getElementById("filesContainer");

    for (const file of files) {

        const fileContainer = document.createElement("div");
        fileContainer.className = "selected-file-container align-items-center justify-content-between d-flex";

        const fileDisplay = document.createElement("div");
        fileDisplay.className = "selected-file d-flex align-items-center";

        const imageIconElement = document.createElement("i");
        imageIconElement.className = "fa-regular fa-image";

        const fileNameElement = document.createElement("span");
        fileNameElement.textContent = file.name;

        fileDisplay.appendChild(imageIconElement);
        fileDisplay.appendChild(fileNameElement);
        fileContainer.appendChild(fileDisplay);

        filesContainer.appendChild(fileContainer);
    }

    event.target.value = '';
});

个字符

赞(0）回复(0）举报 11个月前

dfuffjeb2#

一个简单的解决方案是将.selected-file-container Package 在一个模板标记中，然后克隆它，在将其附加到容器之前向其添加相关的文件数据。

const displaySelectedFiles = (event) => {
  const files = event.target.files;
  const container = document.getElementById("file-container");
  const template = document.getElementById("file");
  
  for (file of files) {
    const fileTemplate = template.content.cloneNode(true);
    
    fileTemplate.getElementById("selectedImage").src = URL.createObjectURL(file);
    fileTemplate.getElementById("selectedFileName").textContent = file.name;
  
    container.appendChild(fileTemplate);
  }
}

document.getElementById("fileInput").addEventListener("change", displaySelectedFiles);

.choose-file-btn {
  cursor: pointer;
}

img {
  height: 25px;
}

<template id="file">
 <div class="selected-file-container align-items-center justify-content-between d-none">
    <div class="selected-file d-flex align-items-center">
       <img id="selectedImage" class="hidden" src="" alt="Selected Image"/>
       <span id="selectedFileName">Filename.jpg</span>
    </div>
    <span>1 MB</span>
  </div>
</template>

<input type="file" id="fileInput" multiple style="display: none" />
<label for="fileInput" class="choose-file-btn">
  <span>Choose File</span>
</label>

<div id="file-container"></div>

赞(0）回复(0）举报 11个月前

8ehkhllq3#

因此，如果你想添加多个图像，你应该从HTML中删除<img>，因为每一个新的图像将改变HTML中img的src。所以每次添加图像时，你应该创建一个新元素<img>。有正确的JS和HTML代码：
JS

document
.getElementById("fileInput")
.addEventListener("change", function (event) {
    const selectedFile = event.target.files[0];

    const selectedImageElement =
        document.getElementById("selectedImage");
    const selectedFileNameElement =
        document.getElementById("selectedFileName");
    const selectedFileContainer = document.querySelector(
        ".selected-file-container"
    );

    if (selectedFile) {
        const imageIconElement = document.createElement("i");
        const image = document.createElement("img");
        image.innerHTML = `<img
            id="selectedImage"
            class="hidden"
            src=""
            alt="Selected Image"
        />`
        image.src = URL.createObjectURL(selectedFile);
        
        imageIconElement.className = "fa-regular fa-image";
    
        selectedFileNameElement.appendChild(image);
        selectedFileNameElement.insertAdjacentHTML(
            "beforeend",
            selectedFile.name
        );

        selectedImageElement.src = URL.createObjectURL(selectedFile);
        selectedFileContainer.classList.add("d-flex");
    } else {
        // Dosya seçilmediyse selected-file-container'ı gizle
        selectedFileContainer.classList.add("d-none");
    }
});

字符串
HTML

<div class="selected-file-container align-items-center justify-content-between d-none">
    <div class="selected-file d-flex align-items-center">
        <span id="selectedFileName">Filename.jpg</span>
    </div>
    <span>1 MB</span>
</div>
<input type="file" id="fileInput" style="display: none" />
<label for="fileInput" class="choose-file-btn">
    <span>Choose File</span>
</label>

型

赞(0）回复(0）举报 11个月前

我来回答

css 如何在选择文件时显示不同的文件？

3条答案

相关问题

热门标签

最新问答