fileReader()

时间：2016-04-27 22:44:43 阅读：416 评论：0 收藏：0 [点我收藏+]

标签：

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 loadevent 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‘ 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>

View Code

readAsText(blob : Blob, [encoding : String]) : undefined

Begins reading from blob as a string. The result will be stored on this.result after the ‘load‘ event fires. For the valid values ofencoding, see character sets.

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

    var reader = new FileReader();
    reader.onload = function(){
      var text = reader.result;
      console.log(reader.result.substring(0, 200));
    };
    reader.readAsText(input.files[0]);
  };
</script>

View Code

Instance Events

onloadstart / ‘loadstart‘ event

listener(event : ProgressEvent) : undefined

Called after starting a read operation.

<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

onprogress / ‘progress‘ event

listener(event : ProgressEvent) : undefined

Called during a read operation to report the current progress.

<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

onload / ‘load‘ event

listener(event : ProgressEvent) : undefined

Called when a read operation successfully completes.

<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

onabort / ‘abort‘ event

listener(event : ProgressEvent) : undefined

Called when the read is aborted with abort().

<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);

      if (event.type === ‘loadstart‘) {
        reader.abort();
      }
    };

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

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

View Code

onerror / ‘error‘ event

listener(event : ProgressEvent) : undefined

Called when there is an error during the load.

<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);

      if (event.type === ‘loadstart‘) {
        reader.abort();
      }
    };

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

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

View Code

onloadend / ‘loadend‘ event

listener(event : ProgressEvent) : undefined

Called after a read completes (either successfully or unsuccessfully).

<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.

fileReader()

标签：

原文地址：http://www.cnblogs.com/RachelChen/p/5440092.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行