那么些指标才享有文件的元数据

在作者的前一篇blog中,小编介绍了在JavaScript中怎样利用文件,具体注重放在什么拿到File对象。唯有当客户通过上传或许拖拽的主意上传了文件,那一个目的工夫有文件的元数据。大器晚成旦你有了那些文件,下一步就是从那些文件中读取数据。

FileReader 类型

FileReader类型有八个纯净的职业,就是从叁个文书中读取数据并蕴藏在一个JavaScript变量中。它的API有意设计得与XMLHttpRequest相仿,因为它们都以从三个外表财富(浏览器之外)加载数据。读操作是异步的,那样不会使浏览器窒碍。

FileReader能够成立各类格式来表示文件的数量,而当读取文件时回来的格式是必需的。读取操作是通过调用上边任一方法来形成的:

  • readAsText(卡塔尔国 – 使用纯文本的款型重回文件内容
  • readAsBinaryString(卡塔尔国 –
    使用加密二进制数据字符串的款型来回到文件内容(该办法已屏弃,请使用readAsArrayBuffer(卡塔尔国代替)
  • readAsArrayBuffer(卡塔尔国 –
    使用ArrayBuffer的款型来回到文件内容(对二进制数据比如图像文件有用)
  • readAsDataUEvoqueL(卡塔尔 – 使用数据UHavalL的款式重回文件内容

像XHENCORE对象的send方法会发起一个Http央浼同样,下面的各种方法都会运维一个文书读取。就这点以来,在上马读取以前,你不得不监听load事件,event.target.result总是回到读取的结果。比如:

var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    console.log("File contents: " + contents);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsText(file);

在这里个事例中,大家简要地读取文件内容,并将内容以纯文本的形式出口到console。当文件被成功读取时会调用onload操作,而因为有些原因无法读取时会调用onerror操作。在事件微电脑中得以经过event.target来获取FileReader实例,何况它推荐那样使用,而不是直接选择reader变量。result属性包罗读取成功时的公文内容和读取战败时的错误消息。

读取数据UMorganPlus 4I

你能够用几近的点子来将文件读取为三个数码U本田CR-VI,数据的U凯雷德I(一时也叫数据U路虎极光L)是个风趣的选项,比方你想要呈现从磁盘上读取的图像文件,你能够用上边包车型客车代码那样做:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        img     = document.createElement("img");

    img.src = dataUri;
    document.body.appendChild(img);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

这段代码轻巧地在页面上插入叁个从磁盘上读取来的图像文件。因为这一个数目U奥迪Q3I包蕴了图像的具有数据,所以它能够被平素传给图像的src属性,并出示在页面上。你能够改造地加载图像和将其绘制到一个<canvas>上:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
        img     = new Image();

    // wait until the image has been fully processed
    img.onload = function() {
        context.drawImage(img, 100, 100);
    };
    img.src = dataUri;
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);

这段代码将图像数据加载到多个新的Image对象,并将其绘制到三个画布上(宽度和长短都钦赐为100)。

多少U摩根Plus 8I平时用来做那一个,但能用在别的类型的文件上。将文件读取为三个数据U奥德赛I最分布的用法是在web页面中飞快显示文件内容。

读取ArrayBuffers

ArrayBuffer类型[1]最早是作为WebGL的风度翩翩局地被推举的。多少个Arraybuffer代表八个点儿的字节数,能够用来积攒放肆大小的数字。读取一个ArrayBuffer数据的点子亟待一个一定的视图,举例Int8Array是将里面包车型地铁字节管理为一个有标记的8位整数群集,而Float32Array是将当中的字节管理为一个叁16人浮点数的汇集。那些可以称作类型数组[2],那样能够抑遏你职业在贰个特定的数字类型上,并不是满含自由档期的顺序的数量(像古板的数组)。

当管理二进制文件时你能够先行选择ArrayBuffer,这样对数码能够有更加细粒度的主宰。要讲明有关ArrayBuffer的有所ins和outs已经高于本篇blog的界定,你只要求通晓在你须要的时候能够比较轻易地将七个文件读取为三个ArrayBuffer就足以了。你能够直接传三个ArrayBuffer到一个XHSportage对象的send(卡塔尔国方法,发送原始数据到服务器(你会在服务器的乞请中读取那几个数额去重新创立文件),只要您的浏览器完全接济XMLHttpRequest
Level 2[3](超越十分之五新星的浏览器,包蕴IE10和Opera12都扶助)。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website