文件上传功能现在是越来越普遍, 所有的社交网站, 媒体网站, 比如优酷视频, 微博等, 都提供了上传图片, 上传视频等功能. 但过去 web 程序员都很清楚, 用 html 表单上传文件是很麻烦的事情, 特别是你想了解一下用户上传的文件的一些属性, 必须等它上传完成后才能知道.
未知的东西上传到服务器上, 有可能产生安全问题, 也有可能体积太大, 超过允许, 浪费空间. 现在好了, Web 技术在进步, HTML5 带来了很多好东西. 这个 FileReader API 就能让你在用户上传之前就能获取上传文件的一些基本属性.
观看演示
HTML 代码
这个 FileReader API 的工作原理和 File API 一样, 需要使用 input[type="file"] 元素:
- <-- 一个能上传多媒体文件的表单 -->
- <input type="file" id="upload-file" multiple />
- <-- 显示图片的地方 -->
- <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 编码的字符串, 然后使用图片的 data URI 方式显示它. 其它的 FileReader 读取方法还有 readAsText, readAsArrayBuffer 和 readAsBinaryString 等
观看演示
有了这个 FileReader API, 我们就可以避免用户先将文件上传到服务器, 在浏览器客户端我们就可以进行操作. 这些在上传到服务器前的预处理是很有必要的.
来源: http://www.webhek.com/post/filereader-api.html