filereader

filereader

As broadband speed continues to get faster, the web continues to be more media-centric.  Sometimes that can be good (Netflix, other streaming services), sometimes that can be bad (wanting to read a news article but it has an accompanying useless video with it).  And every social service does anything it can to display an image with any user upload.

随着宽带速度的不断提高，网络继续以媒体为中心。 有时可能很好(Netflix，其他流媒体服务)，有时可能不好(希望阅读新闻文章，但附带有无用的视频)。 每个社交服务都将竭尽所能显示任何用户上传的图像。

One thing I hated about working with user-provided files was having to host them on a server somewhere:  the uploaded files take up disk space and in some cases become a security concern....until now.  The FileReader API allows you to access user files and their content from their machine without needing to upload to your server.

我讨厌使用用户提供的文件的一件事是必须将它们托管在某处的服务器上：上载的文件会占用磁盘空间，并且在某些情况下会成为安全问题……直到现在。 FileReader API允许您从用户的计算机访问用户文件及其内容，而无需将其上传到服务器。

View Demo 观看演示

HTML (The HTML)

The FileReader API works off of the File API premise and thus requires a input[type="file"] element:

FileReader API在File API前提下工作，因此需要input[type="file"]元素：

<-- Let's go big and enable for multiple file uploads --> <input type="file" id="upload-file" multiple /> <-- We'll display the image in this DIV --> <div id="destination"></div>

Read my File API post to learn more about what it provides, like location, size, type, and more.

阅读我的File API帖子，以了解有关它提供的内容的更多信息，例如位置，大小，类型等。

JavaScript (The JavaScript)

This example calls for an image to be chosen within the input; once an image is chosen by the user on their machine, the image is to be displayed on the page:

这个例子要求在input选择一个图像。 用户在其机器上选择了图像后，该图像将显示在页面上：

document.getElementById('upload-file').addEventListener('change', function() { var file; var destination = document.getElementById('destination'); destination.innerHTML = ''; // Looping in case they uploaded multiple files for(var x = 0, xlen = this.files.length; x < xlen; x++) { file = this.files[x]; if(file.type.indexOf('image') != -1) { // Very primitive "validation" var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = e.target.result; // File contents here destination.appendChild(img); }; reader.readAsDataURL(file); } } });

This example uses FileReader's readAsDataURL method to convert the file contents to a base64-encoded string which can be used as an image data URI for the src attribute.  Other FileReader read types include readAsText, readAsArrayBuffer, and readAsBinaryString.

本示例使用FileReader的readAsDataURL方法将文件内容转换为base64编码的字符串，该字符串可用作src属性的图像数据URI。 其他FileReader读取类型包括readAsText ， readAsArrayBuffer和readAsBinaryString 。

View Demo 观看演示

With this API you can avoid server uploads of raw user files, which I love.  You can also pre-treat content before you manually upload user content to your servers.  An example of where this is used is the smartcrop.js testbed.  Please share other ideas for usage if you have them!

使用此API，您可以避免服务器上传我喜欢的原始用户文件。 您还可以在手动将用户内容上传到服务器之前对内容进行预处理。 smartcrop.js testbed是使用此方法的一个示例。 如果有其他想法，请与他人分享！

翻译自: https://davidwalsh.name/filereader

filereader

相关资源：javascript HTML5文件上传FileReader API