zoukankan      html  css  js  c++  java
  • fileReader()

    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  

    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  

    The current state of the reader. Will be one of EMPTYLOADING, 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  

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

    The value returned by readyState after the load event has fired.

     
    EMPTY : Number  

    The value returned by readyState before the one of the read methods has been called.

     
    LOADING : Number  

    The value returned by readyState after one of the read methods has been called but before the load event has fired.

  • 相关阅读:
    静态邻接表dijkstra
    最短路径系列【最短路径、哈密顿路等】
    python 给多人发送邮件,且将结果添加为附件
    Excel调换数据位置
    try ... except...,好处是执行失败后,仍然可以继续运行
    制作表头,2种方式
    工资表变工资条,2种方式
    C言语教程第一章: C言语概论 (4)
    从红旗5.0说起——看Linux的内存解决
    红旗Linux桌面4.1文本安装历程图解(二)
  • 原文地址:https://www.cnblogs.com/RachelChen/p/5440092.html
Copyright © 2011-2022 走看看