zoukankan      html  css  js  c++  java
  • HTML5(FileRdeader)

    主要作用:

      异步读取存储在用户计算机上的文件(或原始缓冲区的内容),使用File或Blob对象指定要读取的文件或数据。其中File是input元素上选择文件后返回的FileList对象,也可以是拖放操作生成的DataTransfer对象,还可以是来自HTMLCanvasElement上执行mozGetAsFile()方法后返回的结果。


    创建实例:

      var reader = new FileReader();//构造函数返回一个新构造的FileReader


    方法:

      abort():void终止文件读取操作,在返回时,readyState属性为DONE

      readAsArrayBuffer(file):void异步按字节读取文件内容,一旦完成,result属性中保存的结果用ArrayBuffer对象表示

       readAsBinaryString(file):void异步按字节读取文件,result属性中结果为文件的二进制串

      readAsDataURL(file):void异步读取文件内容,一旦完成,result属性中将用data:url的字符串形式表示

      readAsText(file,encoding):void异步按字符串读取文件内容,result属性中结果以字符串形式表示


    事件:

      onabort当读取操作被终止的时调用

      onerror当读取操作发生错误时调用

      onload当读取操作成功完成时调用

      onloadend当读取操作完成时调用,不管成功还是失败

      onloadstart当读取操作将要开始之前调用

      onprogress在读取数据过程中周期性调用


    读取方式:

      readAsArrayBuffer读取文件后会在内存中创建一个ArrayBuffer对象(二进制缓冲区),将二进制数据放进去。通过这种方式可以直接在网络中传输二进制内容。

      ArrayBuffer中的内容对外是不可见的,要查看其中的内容就要引入另一概念:类型化数组。

      readAsBinaryString readAsDataURL用这个可以不经过后台,直接将本地图片显示在页面上。这样可以减少前后端频繁的交互过程,减少服务器端无用的图片资源。

      readAsText读取文件的单位是字符,因此对于文本文件只要按规定的编码方式读取即可。


    二进制数据上传

      HTML5体系的建立引入一大堆的新东西,基于XHR2,我们可以直接上传或下载二进制内容,无需像以往一样通过form标签由后端拉取二进制内容。


    简单整理下上传逻辑:

      1、通过input[type="file"]标签获取本地文件File对象

      2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer

      3、创建xhr对象,配置请求信息

      4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送

    代码实现如下:

     1 var input  = document.getElementById("file");// input file
     2 input.onchange = function(){
     3 /*FILE API使访问包含File对象的FileList成为可能,FileList代表被用户选择的文件,当用户选择一个文件时,handleFiles()方法会被调用,同时传入包含File对象的FileList,File是用户选中的文件。如果想让用户选择多个文件<input type="file" id="input" multiple>*/
     4 var file = this.files[0];
     5         if(!!file){
     6             var reader = new FileReader();
     7             reader.readAsArrayBuffer(file);
     8             reader.onload = function(){
     9                 var binary = this.result;
    10                 upload(binary);
    11         }
    12     }
    13 }
    14 
    15 //文件上传
    16 function upload(binary){
    17     var xhr = new XMLHttpRequest();
    18     xhr.open("POST", "http://xxxx/opload");
    19     xhr.overrideMimeType("application/octet-stream");
    20     //直接发送二进制数据
    21     if(xhr.sendAsBinary){
    22         xhr.sendAsBinary(binary);
    23     }else{
    24         xhr.send(binary);
    25     }
    26     
    27     // 监听变化
    28     xhr.onreadystatechange = function(e){
    29         if(xhr.readyState===4){
    30             if(xhr.status===200){
    31                 // 响应成功       
    32             }
    33         }
    34     }
  • 相关阅读:
    IsDefined的问题
    设计匠艺模型
    真实案例引起的对系统健壮性的思考
    软件系统的稳定性
    LA工作第二周体会
    LA工作第一周体会
    https://blog.csdn.net/qq_26264237/article/details/90575165
    Maven项目配置logback
    Java 工具 Hutool4.0.0 正式发布:从懵懂到成熟
    IDEAidea中解决Java程序包不存在问题
  • 原文地址:https://www.cnblogs.com/qiaoqianshitou/p/9279826.html
Copyright © 2011-2022 走看看