这篇文章主要介绍了 javascript html5 文件上传 FileReader API 的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能。但过去 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.phperz.com/article/17/0226/266445.html