随着宽带速度越来越快，Web开始更加的富媒体化。有时这可能是不错的（Neffix公司，还有其他的流媒体服务）有时候也可以是坏的（想要阅读的新闻附带着一个无用的视频）。所有社交服务都在竭尽全力显示一张图片和用户上传的东西。

我讨厌用户提供的文件，因为必须上传到某个服务器：上传的文件占用磁盘空间，在某些情况下还可能成为安全隐患……直到现在有了FileReader API。FileReader API允许你访问用户机器上的文件和文件的内容，而不用让用户上传文件到你的服务器上。

示例

HTML

FileReader的API以File API为工作前提，因此需要 input[type=”file”]元素

<--允许多文件上传 -->
<input type="file" id="upload-file" multiple />

<-- 在这个div中展示图片 -->
<div id="destination"></div>

阅读我写的 File API 的文章来了解它提供位置、大小、类型，以及更多信息。

JavaScript

这个例子要求在input框里选择一个图片，一旦用户在他们的机器上选择了一个图片，这个图片将会被显示在页面上。

document.getElementById('upload-file').addEventListener('change', function() {
    var file;
    var destination = document.getElementById('destination');
    destination.innerHTML = '';
    // 循环，以支持上传多个文件的情况
    for(var x = 0, xlen = this.files.length; x < xlen; x++) {
        file = this.files[x];
        if(file.type.indexOf('image') != -1) { //非常原始的验证
            var reader = new FileReader();
            reader.onload = function(e) {
                var img = new Image();
                img.src = e.target.result; // 这里是文件内容
                destination.appendChild(img);
            };
            reader.readAsDataURL(file);
        }
    }
});

这个例子使用FileReader的 readAsDataURL方法将文件内容转化成base64编码的字符串，该字符串可以被用作image的src属性的URI。其他的FileRead 的读取类型还包括readAsText, readAsArrayBuffer和 readAsBinaryString.

示例

有了这个API可以避免上传用户文件到服务器，这是我喜欢的方式。你也可以在手动上传用户内容到你的服务器之前预处理文件内容。一个使用预处理的例子是 smartcrop.js testbed. 如果你对它有其他用法请分享出来。

扫码关注w3ctech微信公众号