您的位置：首页 > 其它

fileReader()

2016-04-27 21:21 295 查看

File Interface

A File object in JavaScript references an actual file in the local filesystem.

This File object inherits all properties and methods from the Blob class.

Although the File objects and Blob objects are different, they expose same methods and properties.

There is no way to create a File object, some JavaScript API return references File objects.

File object can be retrieved from a FileList object returned as a result of a user selecting files using the <input> element or from a drag and drop operation’s DataTransfer object.

Constructors

new FileReader() : FileReader

Constructs a new FileReader.

Example:

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>
<script>
var openFile = function(event) {
var input = event.target;

var reader = new FileReader();
reader.onload = function(){
var dataURL = reader.result;
var output = document.getElementById('output');
output.src = dataURL;
};
reader.readAsDataURL(input.files[0]);
};
</script>

Instance Properties

error : Error readonly

The error encountered during load.

<input type='file' onchange='openFile(event)'>
<script>
var openFile = function(event) {
var input = event.target;

var reader = new FileReader();
reader.onloadstart = function() {
reader.abort();
};

reader.onloadend = function() {
console.log(reader.error.message);
};

reader.readAsDataURL(input.files[0]);
};
</script>

readyState : Number readonly

The current state of the reader. Will be one of

EMPTY

LOADING

, or

DONE

<input type='file' onchange='openFile(event)'>
<script>
var stateNames = {};
stateNames[FileReader.EMPTY]   = 'EMPTY';
stateNames[FileReader.LOADING] = 'LOADING';
stateNames[FileReader.DONE]    = 'DONE';

var openFile = function(event) {
var input = event.target;

var reader = new FileReader();
reader.onload = function(){
console.log('After load: ' + stateNames[reader.readyState]);
};

console.log('Before read: ' + stateNames[reader.readyState]);
reader.readAsDataURL(input.files[0]);
console.log('After read: ' + stateNames[reader.readyState]);
};
</script>

result : Object readonly

The result from the previous read. The result will be either a

String

or an

ArrayBuffer

. The result is only available after the

load

event fires.

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>
<script>
var openFile = function(event) {
var input = event.target;

var reader = new FileReader();
reader.onload = function(){
var dataURL = reader.result;
var output = document.getElementById('output');
output.src = dataURL;
};
reader.readAsDataURL(input.files[0]);
};
</script>

Instance Methods

abort() : undefined

Stops the current read operation.

readAsArrayBuffer(blob : Blob) : undefined

Begins reading from

blob

as an

ArrayBuffer

. The result will be stored on

this.result

after the

'load'

event fires.

<input type='file' onchange='openFile(event)'>
<script>
var openFile = function(event) {
var input = event.target;

var reader = new FileReader();
reader.onload = function(){
var arrayBuffer = reader.result;

console.log(arrayBuffer.byteLength);
};
reader.readAsArrayBuffer(input.files[0]);
};
</script>

readAsDataURL(blob : Blob) : undefined

Begins reading from

blob

as a

'data:'

url string. The result will be stored on

this.result

after the

'load'

event fires.

<input type='file' onchange='openFile(event)'>
<script>
var openFile = function(event) {
console.log('entering openFile()');
var input = event.target;

var printEventType = function(event) {
console.log('got event: ' + event.type);
};

var reader = new FileReader();
reader.onloadstart = printEventType;
reader.onprogress = printEventType;
reader.onload = printEventType;
reader.onloadend = printEventType;

console.log('  starting read');
reader.readAsDataURL(input.files[0]);
console.log('leaving openFile()');
};
</script>

View Code

FileReader Properties

DONE : Number readonly value = 2

The value returned by

readyState

after the

load

event has fired.

EMPTY : Number readonly value = 0

The value returned by

readyState

before the one of the read methods has been called.

LOADING : Number readonly value = 1

The value returned by

readyState

after one of the read methods has been called but before the

load

event has fired.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航