在页面上循环显示所选择的图片文件，我们可以使用 createObjectURL() 为选择的每一个图像文件创建一个地址… 再把这个地址作为 <img> 标签的 src 属性的值 ..

在图像完成显示以后，立即吊销创建的指向在这个图像的地址 …

我们可以直接使用之前在显示文件列表的代码 … 要修改的地方就是循环里面的代码 …

先去在文档上创建一个用来显示图像的 img 标签 … var img = document.createElement("img”),

然后再给所选择的文件创建一个地址 … url = window.URL.createObjectURL(file[i]);

再去设置一下<img> 标签的 src 属性 … 把给文件创建的 url 作为 src 属性的值 … img.src = url;

在页面上载入图像以后，可以吊销创建的 url ..

img.onload = function() {
window.URL.revokeObjectURL(this.src);
}

这里的 this ，表示的就是 img 这个对象 ..

下面再去给图像添加一个 css 类 … img.classList.add("thumbnail"); 这个类可以给图像添加一些额外的样式 ..

下面我们再去创建一个图像的容器，再把图像放在这个容器里面 …

var imgContainer = document.createElement('div');
imgContainer.appendChild(img);

最后再把包含图像的容器追加到用来显示图像显示的容器里面 …

listGroup.appendChild(thumbnailContainer);

保存 … 打开浏览器 　… 选择文件 … 找到一些图像 … 打开 …

在页面上，会使用显示出所有选择的图像 … 图像的路径是我们使用 createObjectURL() 临时创建的 … 图像显示出来以后 … 会自动 吊销创建的路径 ..