先注释掉这个 console.log() … 首先我们可以给事件对象里的文件列表起个名字 .. 这样在后面的代码里使用这个列表的时候会更容易一些 …

var file = event.target.files;

然后再用一个 for 循环输出文件相关的信息 …

for (i = 0; i < file.length; i ++ ) {}

大括号里是每一次循环要做的事儿 … 首先在文档上去创建一个 <li> 标签 … 给这个标签添加一个指定的 css 类 … 再去为这个 <li> 标签添加内容，内容就是文件的名称，类型，大小，还有最近的修改日期 …

最后再把这个<li> 标签还有它的内容追加到 listGroup 这个容器里面 …

创建元素可以使用 createElement() … 括号里是要创建的元素的名称 .. 给这个元素起个名字 ..

// 在文档中创建一个 li 标签
var li = document.createElement("li");

然后再去给它添加一个 css 类 … 可以使用 classList.add() … 要添加的类的名称是 list-group-item … 这个类可以为列表添加一些额外的样式 … 这些样式都是来自 Bootstrap …

// 为 li 标签添加一个类
li.classList.add("list-group-item");

再去给这个 <li> 标签添加内容 … 我们可以去创建一个文字节点 … 再把它追加到 <li> 标签里面 .. 文档都是由不同的节点组成的 … 常用的节点类型比如元素节点，元素的属性节点，元素里面的文字也是一种节点类型 …

创建文字节点，可以使用 createTextNode() …

var content = document.createTextNode() …

这个文字节点的内容就是文件的名称，类型，大小，还有修改日期 …

file[i].name + ' ' +
file[i].size + ' ' +
file[i].type + ' ' +
file[i].lastModifiedDate

然后再把这个创建的文本节点添加到 <li> 标签里面 … 这里我们用的是 appendChild()

// 把文字内容添加到 li 标签里面
li.appendChild(content);

最后，再把整个 <li> 标签还有它里面的内容追加到 listGroup 里面 …

// 把 li 标签添加到 listGroup 里面
listGroup.appendChild(li);

保存 …

回到浏览器 … 刷新一下 …

然后点击 选择文件 … 找到几个在本地电脑上面的文件 … 打开 … 在页面上，会直接显示出所选择的文件列表 ….

这个列表里显示的文件的大小还有最近修改日期的都不太友好 … 在下面的视频里，我们再去改进一下。