java 读取html5 blob_JavaScript-利用html5 读取本地文件特性实现更好的交互体验

可以使用Html5提供的File Api,它包括：

一个FileList序列，代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过调用实现。

一个Blob接口，它代表原始二进制数据，通过Blob对象你可以访问里面的字节数据。

一个File接口，它里面存有文件的只读属性信息，像文件名，文件类型，文件数据访问的地址。

一个FileReader接口，它提供了读取一个文件的方法，和一个获取文件读取结果的事件模型。

一个FileError接口和一个FileException对象，它们用来定义这个规范中的错误产生条件。

在使用之前，需要检查你的浏览器是否支持File Api,代码如下

//检查浏览器是否支持File Api提供的所有功能，如果你只需要部分功能，可以省略其它部分的检查.

if (window.File && window.FileReader && window.FileList && window.Blob) {

//全部支持

} else {

alert('该浏览器不全部支持File APIs的功能');

}

通过表单选择:

function handleFileSelect(evt) {

var files = evt.target.files; // FileList object

// files is a FileList of File objects. List some properties.

var output = [];

for (var i = 0, f; f = files[i]; i++) {

output.push('

', f.name, ' (', f.type || 'n/a', ') - ',

f.size, ' bytes, last modified: ',

f.lastModifiedDate.toLocaleDateString(), '

');

}

document.getElementById('list').innerHTML = '

• ' + output.join('') + '

';

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

使用拖放选择：

Drop files here

// Setup the dnd listeners.

var dropZone = document.getElementById('drop_zone');

dropZone.addEventListener('dragover', handleDragOver, false);

dropZone.addEventListener('drop', handleFileSelect, false);

接下来是读取选择的图片，FileReader提供了4中读取文件的方式：

1、FileReader.readAsBinaryString(Blob|File)；

2、FileReader.readAsText(Blob|File, opt_encoding)；

3、FileReader.readAsDataURL(Blob|File)；

4、FileReader.readAsArrayBuffer(Blob|File)

选择其中的任何一种方式读取文件, 处理过程中这些方法可以被使用onloadstart, onprogress, onload, onabort, onerror,和 onloadend.

//这是一个从Url读取图片的示例

function handleFileSelect(evt) {

var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.

for (var i = 0, f; f = files[i]; i++) {

// Only process image files.

if (!f.type.match('image.*')) {

continue;

}

var reader = new FileReader();

// Closure to capture the file information.

reader.onload = (function(theFile) {

return function(e) {

// Render thumbnail.

var span = document.createElement('span');

span.innerHTML = [''].join('');

document.getElementById('list').insertBefore(span, null);

};

})(f);

// Read in the image file as a data URL.

reader.readAsDataURL(f);

}

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);