在这个文件里面，我添加了一个 <ul> 标签，上面有一个 .list-group 类 … 下面，我们去把用户使用 选择文件 表单元素所选择的文件的列表，显示在这个拥有 .list-group 类的 <ul> 标签里面 。

（#script.js）

这里我们要做的就是，先去监听选择文件表单元素的 change 事件 … 也就是如果这个表单元素发生了改变，比如选择了文件 … 就会触发这个 change 事件 ..

然后当这个事件发生以后，我们可以在这个事件返回的对象里面，获取到所选择的文件列表 … 然后再把这个文件列表里面的文件信息显示在那个 .list-group 类的 <ul> 标签里面。

代码

先去获取到 .list-group 类所在的元素，另外还有 选择文件 这个表单元素 … 找到以后，给它们起个名字 … listGroup 就是用来显示文件列表用的那个容器 … 这里我获取到它的方法使用了 querySelector .. 在括号，可以使用类似 CSS 选择器的形式去选择页面上的元素。

这个 querySelector 会返回找到的第一个结果 … 也就是如果文档里面包含多个 .list-group 这个类 … 它只会返回找到的第一个 .list-group …

listGroup 下面的 fileSelect 是选择文件的表单元素 … 同时定义多个变量 … 可以只使用一个 var 关键词 ... 不同的变量之间可以使用逗号分隔开 …

var listGroup = document.querySelector(".list-group"),
fileSelect = document.forms["upload"]["fileselect"];

监听

下面，我们再去监听 fileSelect 的 change 事件 … 这个事件发生以后 … 去执行 displayFileInfo() 函数 … 再去定义一下这个函数 ...

// 监听 选择文件 表单元素的 change 事件
fileSelect.addEventListener("change", displayFileInfo, false);

displayFileInfo()

// 当 选择文件 表单元素的 change 事件发生以后所做的事
function displayFileInfo(event) {}

我们把事件返回来的事件对象传递给这个函数 … 在这个对象里面会包含所选择的文件列表 .. 下面，我们使用一个 console.log() 去把这个事件对象输出到控制台上看一下 ..

console.log(event)

保存 … 打开浏览器 … 刷新 … 打开控制台 …

点击 选择文件 … 找到本地电脑上的几个文件 … 这个选择文件元素发生了变化 ... 也就会去触发一个 change 事件 …

在控制台上，会输出这个事件返回的对象... （#打开）

在它的 target 属性里面， 可以找到 files … 也就是选择的文件列表 … 在下面的视频里，我们再去使用一个循环把列表里的内容输出到页面上 …