代码详细解读#

1. document.querySelector('.upload')

   • 作用：在 HTML 页面中查找 class="upload" 的元素。
   • 场景：这个元素通常是一个文件输入框，例如 <input type="file" class="upload">。

2. .addEventListener('change', ...)

   • 作用：给这个输入框绑定一个 change 事件。
   • 触发时机：当用户点击这个按钮，在文件弹窗中选中一张图片并点击“打开”后，这个事件就会被触发。

3. e.target.files[0] (核心点)

   • e.target：代表触发事件的那个元素（即 <input> 标签本身）。
   • files：这是文件输入框特有的属性，是一个数组（FileList），包含了用户选中的所有文件。
   • [0]：因为主要是单文件上传，所以直接取数组中的第 1 个元素。
   • 结果：这就是用户选中的那个文件对象（File Object），里面包含了文件名、文件大小、文件类型（如 image/png）以及文件的二进制数据。

在“图书管理”案例中的下一步#

在你的项目中，拿到这个 files[0] 之后，通常紧接着会做以下两件事之一：

1. 上传服务器：创建一个 FormData 对象，把这个文件放进去，然后用 AJAX (axios) 发送给后台接口。

   1
   const fd = new FormData()
   2
   fd.append('img', e.target.files[0]) // 'img' 是接口要求的参数名
   3
   // 然后发送请求...
   

2. 图片预览：为了让用户看到自己选了什么图，你可能会把这个文件对象转换成一个临时 URL 显示在 <img> 标签里。

简单来说，这是实现上传图书封面功能的第一步：“获取用户手里的图片”。

1. h1, div, span 等普通标签#

• 不触发 change 事件。这些不是表单元素。

2. <input type="text"> (文本框)#

• 触发时机：内容改变 + 失去焦点 (Blur)
  • 例子：你在输入框里输入 “JavaScript”，当你还在打字时，不会触发。必须当你点击输入框外面的空白处（或者按 Tab 切走），且内容和之前不一样时，才会触发。
  • 区别 input 事件：如果你想打一个字就触发一次（比如实时搜索），应该用 input 事件，而不是 change。

3. <select> (下拉菜单)#

• 触发时机：选中项改变
  • 例子：你点开下拉菜单，鼠标点击选中了另一个选项（或者按键盘上下键回车），一旦选中的值变了，立刻触发。不需要点别的地方。

4. <input type="checkbox"> (复选框) / <input type="radio"> (单选框)#

• 触发时机：点击切换状态
  • 例子：鼠标点击勾选（或取消勾选）的一瞬间，状态改变了，立刻触发。

5. <input type="file"> (文件上传 - 你刚才遇到的)#

• 触发时机：文件选择完成
  • 例子：点击按钮 -> 弹出系统文件选择框 -> 选中文件 -> 点击系统窗口的“打开”按钮。当你点击“打开”的那一刻，文件列表发生了变化，立刻触发。
  • 注意：如果你打开了选择框但点击了“取消”，或者选了和上次一模一样的文件（部分浏览器），可能不会触发。

总结对比表#

在你当前的“图书管理”案例中，使用 change 事件监听文件上传是最标准的做法，因为用户只有选完图，你才能拿到文件去上传。