比方说，你正在开发一个炫酷的下一代图片分享网站，并且想使用 HTML 来展示用户在实际上传之前的图片的缩略图。你可以像我们之前讨论的那样创建自己的 input 元素或者 drop 区域，然后对它们使用一个回调函数，比如下面的 handleFiles()。

这里我们循环处理用户选择的文件，看每个文件的 type 属性是不是以“image/”开头。对每个文件而言，如果它是图片，我们就创建一个新的 img 元素。可以使用 CSS 来创建一个漂亮的边框或阴影来显示图片的具体大小，在这儿就不具体做了。

为了在 DOM 树中更容易地找到他们，每个图片元素都被添加了一个名为 obj 的 CSS 类。我们还给每个图片添加了 file 属性以指定其 File 属性；这样做可以让我们拿到稍后需要实际上传的图片。我们在预览页中使用 Node.appendChild() 来添加新的缩略图。

接下来，我们创建了 FileReader 来处理异步的图片加载并把它赋给 img 元素。在创建一个新的 FileReader 对象后，我们设定了它的 onload 函数，然后调用 readAsDataURL() 函数开始后台读取文件。当整个图片文件的内容都被全部加载完后，它们被转换成了一个被传递到 onload 回调函数的 data: URL。我们对这个程序的实现是将 img 元素的 src 属性设置为加载的图片，从而使图片出现在用户屏幕的缩略图中。