zhengrenzhe's blog   About

js读取,异步上传文件

使用html的form上传文件,上传之后页面就会跳转,如果业务需求需要做无刷新的页面呢,这时就轮到js上场了。

js文件上传核心就是’FormData’对象,这是XMLHttpRequest Level 2的一个新增接口,用来模拟表单上传,尤其是文件的上传。对于普通字符串数据上传来说,使用普通的ajax足矣,但对于文件来说就不同了,FormData的存在使得上传文件不会再出现页面跳转了,而且这个过程还是异步的。

实例化一个FormData有两种方法,

1.不传参数,使用append方法增添键值对。

var form = new FormData();
form.append('name','droiz');
form.append('sex','man');

2.使用现有form元素进行实例化

var formele = document.forms[0];
var form = new FormData(formele);

这两种实例化的效果是相同的。实例化完成后使用ajax上传即可。

var xhr = new XMLHttpRequest(),
xhr.open("POST", "/test");
xhr.send(form);

这样文件就被上传了,异步无刷新。

现在上传问题已经解决了,如果想要读取文件怎么办,使用input元素只能获取到文件的metadata,不能获取到文件的内容,这时就要用到File API了。

File API同样是HTML5的新特性之一,它允许读取本地文件的内容为不仅仅是获取到metadata。

使用的第一步仍是通过input元素获取文件的metadata,接着实例化一个FileReader

var read = new FileReader();

File API允许通过一下集中方式读取文件:

// 以ArrayBuffer对象形式读取
read.readAsArrayBuffer;
// 以二进制字符串形式读取
read.readAsBinaryString;
// 以DataURL对象形式读取,它主要用在读取图片上,可以将图片转换为DataURL格式直接赋值给img的src属性以显示从本地读取的图片。
read.readAsDataURL;
// 以文本形式读取
read.readAsText;

读取后的结果将保存在read.result中。因为File API读取文件是异步的,当读取完成后会触发onload事件。

注意,不要使用File API读取过大的文件,因为File API读取的文件是保存在内存中的,当读取大文件占用过多内存,会导致网页崩溃。

下面是一个读取文本内容的事例,可以读取文本文件,并显示其内容。

← 纯CSS实现tab切换之二  收到了豆瓣实习offer →