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.

  • 相关阅读:
    详解事件驱动跟消息驱动机制相比
    浏览器加载 CommonJS 模块的原理与实现
    全面理解 javascript 的 argements caller callee call apply 之caller
    在javaScript中检测数据类型的几种方式
    Netbeans IDE 安装Emmet插件并解决Emmet插件无效果问题
    JS的 try catch使用心得
    safari 浏览器 input textarea select 等不能响应用户输入
    js十大排序算法
    js实现 页面加载 完成 后顺序 执行
    原生JS封装 toast 弹层,自动关闭
  • 原文地址:https://www.cnblogs.com/RachelChen/p/5440092.html
Copyright © 2011-2022 走看看