html5 存储图片上传,html5 FileReader 图片上传预览

例子

这个方法很有用,比如,可以实现图片的本地预览 (在线演示)

===================================

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.

Note: 此特性在 Web Worker 中可用。

构造函数

FileReader()

返回一个新构造的FileReader。

有关详细信息和示例，请参阅如何在web应用程序中使用文件。

想要创建一个FileReader对象,很简单,如下:

let reader = new FileReader();

方法概述

void abort();

void readAsArrayBuffer(in Blob blob);

void readAsBinaryString(in Blob blob);

void readAsDataURL(in Blob blob);

void readAsText(in Blob blob, [optional] in DOMString encoding);

状态常量

常量名值描述

EMPTY0还没有加载任何数据.

LOADING1数据正在被加载.

DONE2已完成全部的读取请求.

属性

属性名类型描述

errorDOMError在读取文件时发生的错误. 只读.

readyStateunsigned short表明FileReader对象的当前状态. 值为State constants中的一个. 只读

resultjsval读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.

方法

abort()

中止该读取操作.在返回时,readyState属性的值为DONE.

void abort();

参数

无.

抛出的异常

DOM_FILE_ABORT_ERR

当该FileReader对象没有在进行读取操作时(也就是readyState属性的值不为LOADING时),调用abort()方法会抛出该异常.

Note: 实现于Gecko 6.0.

readAsArrayBuffer()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容.

void readAsArrayBuffer(

in Blob blob

);

参数

blob

将要读取到一个ArrayBuffer中的Blob对象或者File对象.

readAsBinaryString()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含所读取文件的原始二进制数据.

void readAsBinaryString(

in Blob blob

);

参数

blob

将要读取的Blob对象或者File对象.

readAsDataURL()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.

void readAsDataURL(

in Blob blob

);

参数

file

将要读取的Blob对象或者File对象.

例子

这个方法很有用,比如,可以实现图片的本地预览 (在线演示)

Image preview example

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {

document.getElementById("uploadPreview").src = oFREvent.target.result;

};

function loadImageFile() {

if (document.getElementById("uploadImage").files.length === 0) { return; }

var oFile = document.getElementById("uploadImage").files[0];

if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }

oFReader.readAsDataURL(oFile);

}

注: IE10以下的版本不支持FileReader()构造函数

readAsText()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个字符串以表示所读取的文件内容.

void readAsText(

in Blob blob,

in DOMString encoding 可选

);

参数

blob

将要读取的Blob对象或者File对象.

encoding 可选

一个字符串,表示了返回数据所使用的编码.如果不指定,默认为UTF-8.

事件处理程序

onabort

当读取操作被中止时调用.

onerror

当读取操作发生错误时调用.

onload

当读取操作成功完成时调用.

onloadend

当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.

onloadstart

当读取操作将要开始之前调用.

onprogress

在读取数据过程中周期性调用.