文件上传区域无法显示已选文件？求助排查JavaScript问题

核心问题 #

你的代码里最关键的错误是HTML中存放文件信息的容器用的是class="filewrapper"，但JavaScript里用document.getElementById("filewrapper")去获取元素——getElementById只能匹配带id属性的元素，所以根本找不到这个容器，自然无法添加文件信息框。

修复步骤 #

1. 修正容器获取方式
   把JS里的容器获取代码改成：

   const filewrapper = document.querySelector(".filewrapper");
   

   或者给HTML里的<div class="filewrapper">添加id="filewrapper"属性，保持JS代码不变。

2. 增加边界错误处理
   当用户打开文件选择框后又取消选择时，e.target.files[0]会是undefined，直接访问name会报错，需要先判断：

   input.addEventListener("change",(e)=>{
     const file = e.target.files[0];
     if(!file) return; // 用户取消选择时直接退出
     let fileName = file.name;
     let filetype = fileName.split(".").pop() || "未知类型";
     fileshow(fileName, filetype);
   })
   

3. 优化文件类型获取（可选）
   用文件名拆分的方式可能会有问题（比如文件名里有多个点），可以改用文件的MIME类型：

   let filetype = file.type.split('/').pop();
   

   如果MIME类型无法识别，再 fallback 到文件名后缀。

修复后的完整代码 #

JavaScript

window.addEventListener("load",()=>{
    const input = document.getElementById("upload");
    const filewrapper = document.querySelector(".filewrapper");

    input.addEventListener("change",(e)=>{
      const file = e.target.files[0];
      if(!file) return;
      let fileName = file.name;
      // 优先用MIME类型，没有则用文件名后缀
      let filetype = file.type.split('/').pop() || fileName.split(".").pop() || "未知类型";
      fileshow(fileName, filetype);
    })

    const fileshow=(fileName, filetype)=>{
      const showfileboxElem = document.createElement("div");
      showfileboxElem.classList.add("showfilebox");
      const leftElem = document.createElement("div");
      leftElem.classList.add("left");
      const fileTypeElem = document.createElement("span");
      fileTypeElem.classList.add("filetype")
      fileTypeElem.innerHTML = filetype;
      leftElem.append(fileTypeElem);
      const filetitleElem = document.createElement("h3");
      filetitleElem.innerHTML = fileName;
      leftElem.append(filetitleElem);
      showfileboxElem.append(leftElem);
      const rightElem = document.createElement("div");
      rightElem.classList.add("right");
      showfileboxElem.append(rightElem);
      const crossElem = document.createElement("span");
      crossElem.innerHTML = "×"; // 直接用字符更可靠，不用HTML实体
      rightElem.append(crossElem);
      filewrapper.append(showfileboxElem);

      crossElem.addEventListener("click", () => {
        filewrapper.removeChild(showfileboxElem);
      })
    }
})

HTML（仅修改容器部分，其他不变）

<div class="filewrapper" id="filewrapper">
  <h3 class="uploaded">Files</h3>
  <!-- 原有示例框可以保留，也可以删除 -->
  <div class="showfilebox">
    <div class="left">
      <span class="filetype"></span>
      <h3></h3>
    </div>
    <div class="right">
      <span>&#215;</span>
    </div>
  </div>
</div>

CSS（无需修改，保持原代码即可）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  width: 100%;
  min-height: 100vh;
  background-color: rebeccapurple;
}

.box {
  max-width: 500px;
  background: #fff;
  padding: 30px;
  width: 100%;
  border-radius: 5px;
}

.upload-area-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.uploadlabel {
  width: 100%;
  min-height: 100px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 3px dashed aqua;
  cursor: pointer;
}

.uploadlabel span {
  font-size: 70px;
  color: aqua;
}

.uploadlabel p {
  color: aqua;
  font-size: 20px;
  font-weight: 800;
  font-family: cursive;
}

.uploaded {
  margin: 30px 0;
  font-size: 16px;
  font-weight: 700;
  color: #222;
}

.showfilebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px 15px;
  box-shadow: #00000d 0px 0px 0px 1px, #d1d5db3d 0px 0px 0px 1px inset;
}

.showfilebox .left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.filetype {
  background: aqua;
  color: #fff;
  padding: 5px 15px;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
  border-radius: 3px;
}

.left h3 {
  font-weight: 600;
  font-size: 18px;
  color: yellowgreen;
  margin: 0;
}

.right span {
  background: aqua;
  color: #fff;
  width: 25px;
  height: 25px;
  font-size: 25px;
  line-height: 25px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  border-radius: 50%;
}

新手排查小技巧 #

• 打开浏览器开发者工具（按F12），切换到「控制台(Console)」，如果代码报错会在这里显示，比如找不到元素的错误Cannot read properties of null (reading 'append')，就能快速定位问题。
• 用console.log()打印变量，比如console.log(filewrapper)，看是否是null，确认元素是否获取成功。

内容的提问来源于stack exchange，提问作者user21165150