html5文件阅读器api,HTML5 文件API(一)

1.FileList对象与File对象

ba71c2e5c3d4ae9dce9600fa9ded518b.png

2.文件API之Bolb对象

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

To construct a Blob from other non-blob objects and data, use the Blob() constructor. To create a blob that contains a subset of another blob's data, use the slice() method. To obtain a Blob object for a file on the user's file system, see the File documentation.

The APIs accepting Blob objects are also listed on the File documentation.

Constructor

Blob(blobParts[, options])

Returns a newly created Blob object whose content consists of the concatenation of the array of values given in parameter.

Properties

Blob.isClosed Read only

A boolean value, indicating whether the Blob.close() method has been called on the blob. Closed blobs can not be read.

Blob.size Read only

The size, in bytes, of the data contained in the Blob object.

Blob.type Read only

A string indicating the MIME type of the data contained in the Blob. If the type is unknown, this string is empty.

Methods

Blob.close()

Closes the blob object, possibly freeing underlying resources.

Blob.slice([start[, end[, contentType]]])

Returns a new Blob object containing the data in the specified range of bytes of the source Blob.

Examples

Blob constructor example usage

The Blob() constructor allows one to create blobs from other objects. For example, to construct a blob from string:

var debug = {hello: "world"};

var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

Before the Blob constructor was available, this could be accomplished through the BlobBuilder API, which is now deprecated:

var builder = new BlobBuilder();

var fileParts = ['hey!'];

builder.append(fileParts[0]);

var myBlob = builder.getBlob('text/xml');

Example for creating a URL to a typed array using a blob

The following code:

var typedArray = GetTheTypedArraySomehow();

var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here

var url = URL.createObjectURL(blob);

// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf

// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.

Example for extracting data from a Blob

The only way to read content from a Blob is to use a FileReader. The following code reads the content of a Blob as a typed array.

var reader = new FileReader();

reader.addEventListener("loadend", function() {

// reader.result contains the contents of blob as a typed array

});

reader.readAsArrayBuffer(blob);

By using other methods of FileReader, it is possible to read the contents of a Blob as a string or a data URL.

281cb5bd1d1a8c19b97a37dce38949f5.png

间断上传文件的格式

a939d94ce67a91bbd1f62c428ca8d56e.png

3.文件API之FileReader对象

http://blog.youkuaiyun.com/zk437092645/article/details/8745647

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值