网站文件上传功能故障求助：无法获取上传文件

核心问题汇总： #

• DOM元素选择错误：HTML中文件输入框仅设置name="upload"，缺失id="upload"；文件容器是class="filewrapper"，但JS中用getElementById("filewrapper")获取，导致无法定位目标元素
• 无效的事件监听：window.addEventListener("upload")无意义，不存在名为upload的window事件，需监听DOM加载完成事件初始化逻辑
• 文件类型获取逻辑缺陷：通过e.target.value.split(".")获取后缀不可靠（如路径含.的情况），应直接从文件对象的name属性拆分
• 未处理空选择场景：用户打开文件选择框后取消操作时，e.target.files[0]会为undefined，引发报错

修正后的代码： #

HTML部分（补全缺失的ID）

<!DOCTYPE html>
<html lang="cs">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="files/style.css" />
  <script src="https://kit.fontawesome.com/d8714c9903.js" crossorigin="anonymous"></script>
  <title>文件上传</title>
</head>

<body>
  <div class="wrapper">
    <div class="box">
      <div class="input-box">
        <div class="upload-area-title">File</div>
        <form action="">
          <!-- 补全id属性 -->
          <input type="file" id="upload" name="upload" accept=".pdf,.jpg,.png,.jpeg" hidden>
          <label for="upload" class="uploadlabel">
            <span><i class="fa-solid fa-upload"></i></span>
            <p>click</p>
          </label>
        </form>
      </div>
      <!-- 补全id属性 -->
      <div id="filewrapper" class="filewrapper">
        <h3 class="uploaded">Files</h3>
      </div>
    </div>
  </div>
  <script src="files/test.js"></script>
</body>

</html>

JavaScript部分（修复事件监听与逻辑漏洞）

// 监听DOM加载完成，确保元素已存在
document.addEventListener("DOMContentLoaded", ()=>{
  const input = document.getElementById("upload");
  const filewrapper = document.getElementById("filewrapper");

  input.addEventListener("change",(e)=>{
    // 处理用户取消选择的情况
    if (!e.target.files || e.target.files.length === 0) return;
    
    const file = e.target.files[0];
    const fileName = file.name;
    // 从文件名拆分后缀，更可靠
    const filetype = fileName.split(".").pop().toLowerCase();
    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.textContent = filetype;
    leftElem.append(fileTypeElem);
    
    const filetitleElem = document.createElement("h3");
    filetitleElem.textContent = fileName;
    leftElem.append(filetitleElem);
    
    showfileboxElem.append(leftElem);
    
    const rightElem = document.createElement("div");
    rightElem.classList.add("right");
    showfileboxElem.append(rightElem);
    
    const crossElem = document.createElement("span");
    // 直接使用文本字符，避免HTML实体解析问题
    crossElem.textContent = "×";
    rightElem.append(crossElem);
    
    filewrapper.append(showfileboxElem);

    crossElem.addEventListener("click", ()=>{
      showfileboxElem.remove(); // 简化元素移除逻辑
    })
  }
})

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%;
}

额外优化说明： #

1. 用textContent替代innerHTML，避免潜在XSS风险，同时简化文本赋值逻辑
2. 移除未使用的jQuery引用，减少冗余依赖
3. 简化元素移除逻辑，使用现代JS的remove()方法
4. 将文件后缀转为小写，保证显示一致性

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