ECMAScript 5.1 规范定义了调用内建构造函数时候的行为,例如,不仅 new Array(1,2) 是正确的,直接使用 Array(1,2) 也是正确的。也就是说这两种方式都可以用,但是结果却不同,第一种创建并初始化一个新的数组对象,而第二种则返回一个具有那两个参数的表达式,但是其构造函数必须是函数才行。

例如,Object() 可以进行数据类型的转换,而 String() 也可以,例如:String();

var a = new String(1);
console.log(a);
// { '0': '1' }
var b = String(1);
console.log(b);
// '1'

Date() 构造函数也可以进行类型转换,但是这样有时候有比较混乱,尤其是对那些只想让日期可读的初学者。例如,

var a = new Date(2012, 0, 1);
// Sun, 01 Jan 2012 00:00:00 GMT
Date(2012, 0, 1)
// 'Sun Jun 10 2012 11:28:03 GMT+0100 (BST)'

第一段代码返回来日期对象,而第二段代码返回了原始的日期字符串。

从构造函数返回的对象

在规范的 13.2.2 节,从构造函数返回的对象的行为被定义为:如果 使用 Type(result) 来检测返回的是 object 的话,则直接返回 result。

这使得构造函数返回另一个对象而不是一个实例。

function Shape() {
  return {
    x: 1, y: 1
  };
}

Shape.prototype = {
  move: function() {}
};

var shape = new Shape();
shape.move();
// TypeError: Object #<Object> has no method 'move'

返回没有此方法的结果,因为 shape 返回 {x: 1, y: 1} ,而其没有 move() 方法,可以使用 instanceof 来测试是否构造函数是作为构造函数来调用的。

function Shape() {
  if (this instanceof Shape) {
    // An object is being instantiated
  } else {
    return {
      a: 'b'
    };
  }
}

Shape.prototype = {
  move: function() {}
};

var shape = new Shape();
shape.move(); //instance nothing returned

Shape(); // Returns { a: 'b' }

jQuery 也使用了类似的方法来实例化 jQuery.Event 对象,而不需要 new 关键字。

jQuery.Event = function( src, props ) {
  // Allow instantiation without the 'new' keyword
  if ( !(this instanceof jQuery.Event) ) {
    return new jQuery.Event( src, props );
  }

此工厂式的行为也可能适合某些API – Dojo 在 NodeList 也使用了它。

结论

调用内置构造函数时,如果不使用关键字,则是类型转换,但是某些构造函数的行为又好像使用了 new 关键字,为了避免因为丢掉 new 关键字而造成的 bug ,所以,还是要牢记,加 new 关键字,和不加,是不一样的。

所以,当编写构造函数的时候,这个行为可以被用来创建类工厂式的 API,这是因为一个构造函数被当作函数调用的话,其行为可以被检测得到。

想了解更多这方面的知识,请在 ECMAScript 规范中搜索 called as a function 。

这一系列文章都讲述的是关于使用 JavaScript 操作文件相关的知识,其中最重要的是 File 对象,而实际上 file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数据,并且 blob 的 size 和 type 属性,都会被 file 对象所继承。

所以,可以说,在大多数情况下,blob 对象和 file 对象可以用在同一个地方,例如,可以使用 FileReader 借口从 blob 读取数据,也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。

Slicing (分割)

通过 Blob 对象可以做的一件有趣的事情就是可以创建一个子 Blob 对象,其实就是可以将其分割(file 对象也可以)。由于每个 Blob 对象都是通过指针指向数据的而不是指向数据本身,因此可以快速的创建指向其他子部分的新的 Blob 对象,这里就需要使用 slice() 方法了。是不是和 JavaScript 的 slice() 方法很象,其实差不多。

此方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。

不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice() 。重写的兼容各个浏览器的例子如下:

function sliceBlob(blob, start, end, type) {

    type = type || blob.type;

    if (blob.mozSlice) {
        return blob.mozSlice(start, end, type);
    } else if (blob.webkitSlice) {
        return blob.webkitSlice(start, end type);
    } else {
        throw new Error("This doesn't work!");
    }
}

当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。例如,Flickr 的工程师就使用此方法将照片中的需要使用的 exif 信息截取出来,而不是等到其传到服务器上之后,才处理的,并且一旦选择要上传照片,则同时传输文件数据和 Exif 数据,这样几乎就可以在上传照片的时候同时显示照片的信息了。

使用旧方法创建 Blob 对象

当 File 对象开始出现在浏览器中的时候,开发者们意识到 Blob 对象太强大了,都想可以在用户不干预的情况下,创建 Blob 对象,毕竟任何数据都可以用 Blob 对象表示,不用非要和文件产生关系。通过 BlobBuilder 创建一个包含有特定数据的 Blob 对象,然后浏览器快速响应即可。(不过目前其还不统一,Firefox:MozBlobBuilder, Internet Explorer 10:MSBlobBuilder,Chrome:WebKitBlobBuilder)。

例子:

var builder = new BlobBuilder();
builder.append("Hello world!");
var blob = builder.getBlob("text/plain");

BlobBuilder() 创建一个新实例,并且使用一个 append() 方法,将字符串(或者 ArrayBuffer 或者 Blob,此处用 string 举例)插入,一旦数据插入成功,就可以使用 getBlob() 方法设置一个 mime 。

并且 BlobBuilder() 还可以处理动态数据,例如 worker 中的数据等,这里就不翻译了。

使用新方法创建 Blob 对象

因为开发者一直想要能够直接创建 Blob 对象,因此浏览器实现了 BlobBuilder(); Blob 作为构造函数而存在,而且,此构造函数也已经被作为标准了,其也是今后创建 Blob 对象的方式。

Blob()–构造函数,接受两个参数,第一个为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。第二个参数,是一个包含了两个属性的对象,其两个属性分别是:

type — MIME 的类型。

endings — 决定 append() 的数据格式,(数据中的 \n 如何被转换)可以取值为 “transparent” 或者 “native”(t* 的话不变,n* 的话按操作系统转换;t* 为默认) 。

例子:

var blob = new Blob(["Hello world!"], { type: "text/plain" });

可以看到,此方法比 BlobBuilder() 简单多了。

但是,此 Blob 构造函数还没有被一些浏览器实现,目前只有某些版本的 Chrome 和 Firefox 实现了。而且剩余的浏览器也没有确定什么时候实现,但是其现在作为 File API 的一部分,将来应该会被统一实现的。

全文完。

FileReader 对象被用来,通过浏览器来读取文件数据,在上篇文章中,讨论了可以使用 FileReader 用多种格式来方便的读取文件数据,在很多方面,FileReader 和 XMLHttpRequest 非常类似。

Progress events (进度事件)

实际上,Progress 事件是一个单独定义的很普通的规范,这些事件被定义来大概的显示数据传输的进度,例如,当从服务器传送数据开始发生的时候,同样的可以是FileReader 对象开始从磁盘读取数据事件发生的时候。

总共有六个事件:

loadstart – 当加载数据开始的时候,此事件通常都是使用在整个过程的最开始。
progress – 当数据读取的时候,可以获得数据读取进度。
error – 当数据加载失败的时候。
abort – 当数据加载被 abort() 方法取消的时候,(在 FileReader 和 XMLHttpRequest 都可用)。
load – 当所有数据都被成功加载的时候。
loadend – 当数据完成传输的时候,一般情况下,都是在出错,取消,或者成功加载后。所以其不区分成功与否。只要过程完成就好。

error 和 load 已经在上篇文章中讨论过了,这里将讨论其他的一些事件。

跟踪进度

当想要知道文件的读取进度的时候,就应该使用 progress 事件,此事件对象,包含了三个属性,来表示文件开始传输之后的状态。

lengthComputable ─ true或者false,表示请求数据的大小是否已知。
loaded ─ 目前接收到的字节数。
total ─ 整个请求中期望传输的字节数。
注意:当lengthComputable为false时,total属性值为0。loadstart事件只会被激发一次。在loadstart之后,进度事件可能被激发0次或多次。

这些数据的作用是可以使 进度条(progress Html5)使用 progress 事件的信息进行进度展示。例如使用 Html5 的 progress 标签来展示数据读取进度。

var reader = new FileReader(),
     progressNode = document.getElementById("my-progress");

reader.onprogress = function(event) {
    if (event.lengthComputable) {
        progressNode.max = event.total;
        progressNode.value = event.loaded;
    }
};

reader.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;

    if (error != null) {
        console.error("File could not be read! Code " + error.code);
    } else {
        progressNode.max = 1;
        progressNode.value = 1;
        console.log("Contents: " + contents);
    }
};

reader.readAsText(file);

相同的例子就是 Gmail 使用的拖拽上传,当把文件拖拽到 Gmail 里之后,就会立即出现进度条,显示上传进度。

处理错误

虽然是从本地上传文件,但有时候还是会失败。File API 定义了四种错误类型。

NotFoundError – 找不到文件。
SecurityError – 文件本身或者读取存在危险,一般情况下,如果读取此文件是危险的或者已经读取了太多次此文件,就会出现该错误。
NotReadableError – 文件存在,但是没有权限读取。
EncodingError – 编码错误,只要是作为 data URI 读取的时候,读取结果的长度超过了浏览器支持的最大长度。

当读取文件时有错误发生时,FileReader 对象的错误属性,就会成为上面提到的一个错误类型的一个实例。在规范中,浏览器都会用一个代码表明错误的属性和值。

FileError.NOT_FOUND_ERR -- NotFoundError.
FileError.SECURITY_ERR -- SecurityError.
FileError.NOT_READABLE_ERR -- NotReadableError.
FileError.ENCODING_ERR for -- EncodingError .
FileError.ABORT_ERR -- 当 abort() 方法调用的时候。

可以通过下面的代码测试不同的错误:

var reader = new FileReader();

reader.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;

    if (error != null) {
        switch (error.code) {
            case error.ENCODING_ERR:
                console.error("Encoding error!");
                break;

            case error.NOT_FOUND_ERR:
                console.error("File not found!");
                break;

            case error.NOT_READABLE_ERR:
                console.error("File could not be read!");
                break;

            case error.SECURITY_ERR:
                console.error("Security issue with file!");
                break;

            default:
                console.error("I have no idea what's wrong!");
        }
    } else {
        progressNode.max = 1;
        progressNode.value = 1;
        console.log("Contents: " + contents);
    }
};

reader.readAsText(file);

下节

FileReader 对象有很多的功能的对象的集合,大部分都和 XMLHttpRequest 类似。通过这三篇文章,应该能够通过 javascript 读取文件并把文件发送到服务器了。 但是 File API 系统,要比上面这三篇文章讲到的多得多,下篇文章将会有更给力的功能来进行讨论。

这是一系列对于初学者的 javascript 文章,包括很多的基础知识,由于我也是初学者,所以,翻译过来,大家一起学习,这一系列就叫做 javascript 101 吧,嘿嘿,当然,一般情况下,每篇文章,基本不会超过十分钟。

经过多年对面向对象编程语言的学习,类(Class)的概念已经深深的在脑海中扎根,但是对于 javascript 却有点让人沮丧,因为 javascript 没有”类”的概念,但是,对于继承来说,javascript 有它自己的一套方式,甚至有时候比基于类的语言更具灵活性。

首先要认识到的就是明白基于对象的和基于类的语言的区别,而 javascript 给了我们使用类似“类”的语言能做的工作的大部分功能,也就是说,javascript 的继承方式,更类似与基于类的语言。

首先我们简单看一下 prototype 属性,看看它如何使我们更深入理解 javascript 。

prototype 属性

prototype 属性是一个内部属性,它的作用就是被设计用来实现继承。这里说的继承,有一个具体的形式,就是说,某个对象(例如 对象 b)的状态和方法都是由另一个对象(例如对象 a)产生的,因此,这里(对象 b)的结构,行为和状态,都是被继承的(继承于对象 a)。(ES5: Objects),这也是基于类的语言所有的,实例(instance)具有状态,而类具有方法。

构造函数(constructor)也是一个函数,有一个名为原型(prototype)的属性:

function Animal() {
}

console.log(Animal.prototype);

在这里会显示 {} 或者 object ,证明 Animal 对象具有 prototype 属性。但是,我们还没有在函数体内定义任何东西,然后增加一些代码:

function Animal() {
}

Animal.prototype.type = 'Unknown';
Animal.prototype.weight = 0;
Animal.prototype.weightUnits = 'kg';

Animal.prototype.toString = function() {
  return this.type + ', ' + this.weight + this.weightUnits;
};

var molly = new Animal();
molly.type = 'Dog';
molly.weight = 28;

console.log(molly.toString());

此时,将会显示 “Dog, 28kg”,同样的,此代码可以被改写,将其写到一起:

function Animal() {
}

Animal.prototype = {
  type: 'Unknown',
  weight: 0,
  weightUnits: 'kg',

  toString: function() {
    return this.type + ', ' + this.weight + this.weightUnits;
  }
};

这些和已经熟悉的基于类的语言,看起来应该没有什么太大的不同。

动态原型

可以动态的添加属性,只要赋值即可。

var molly = new Animal(), harley = new Animal();

molly.type = 'Dog';
molly.weight = 28;

harley.type = 'Dog';
harley.weight = 38;
harley.name = 'Harley';

console.log(molly);// { type: 'Dog', weight: 28 }
console.log(harley);// { type: 'Dog', weight: 38, name: 'Harley' }

此处添加的 “name” 属性,只影响了,(当前的)实例,但是,构造函数(constructor)的原型(prototype),同样可以被改变, 但是这样的话,就会影响所有继承此原型的对象了。例如:

var molly = new Animal();

Animal.prototype.weightUnits = 'oz';

molly.type = 'Dog';
molly.weight = 28;

console.log(molly.toString());//'Dog, 28oz'

不过,这样做(改变原型)有可能带来不好的结果。这也是很多类库不会这么做的原因,因为这么做可能更改本地内建函数的功能(浏览器自身),例如:

String.prototype.match = function() {
  return true;
};

console.log('alex'.match(/1234/));

此时,不管我怎么使用 match() 方法,其都会返回 true ,因此虽然成功的改写了此函数,但是也破坏了浏览器自身(原生的) javascript 的功能。

但是,这并不一定是坏事,因为我们总需要改写或者扩展一些原生的 javascript 功能,例如:使旧浏览器支持新的 javascript 标准。

如果改写了原生的 prototype 属性,会发生什么呢?

var molly = new Animal(), harley;

molly.type = 'Dog';
molly.weight = 28;

Animal.prototype = {
  toString: function() { // 改写原生的 toString 方法。
    return '...';
  }
};

harley = new Animal;
harley.type = 'Dog';
harley.weight = 38;

console.log(molly.toString());// Dog, 28kg
console.log(harley.toString());// ...

在 molly 时,并没有改写原生的 toString 方法,所以其正常输出,但是到 harley 时,由于改写了其方法,所以,其输出 “…” 省略号。

尽管在更改了 prototype 的情况下,应该影响所有的实例,但是,更改(重写)了构造函数的 prototype 却并不影响到所有的实例。这是因为,所有的实例都引用自原型,而不是原型的一份拷贝,也可以这么说:使用 new 关键字,创建的实例,都会连接到原始的原型。

上篇文章,简述了使用 javascript 对于文件上传的一些操作,例如,当用户想要上传,或者拖拽上传文件的时候。如何获得文件对象。那么,这篇文章,将简单的讲述一些读取文件数据的操作。

FileReader

FileReader 只有一个功能,那就是读取文件数据并且将其存储在 javascript 变量中,此 API 专门被设计成模拟(类似) XMLHttpRequest 操作,因为它们两个都是从外部资源加载数据(不包括浏览器)。并且此 API 被设计成异步的(asynchronously),所以不会引起浏览器的锁死。

FileReader 可以将数据读取成各种格式,而且在读取数据的时候,必须要求使用这几种格式,这几种格式如下,必须通过调用这几种格式才能读取数据。

readAsText() – 返回文本数据(text/plain)。
readAsBinaryString() – 返回此文件被编码的二进制数据 (已弃用– 使用 readAsArrayBuffer() 代替)。
readAsArrayBuffer() – 返回此文件的一个ArrayBuffer(二进制数据缓冲)(适合二进制数据,例如图像文件)数据。
readAsDataURL() – 返回此文件的 <a href="http://en.wikipedia.org/wiki/Data_URI_scheme" title="Data URI scheme" target="_blank">data URL</a>

没中方法都初始化一个文件读取动作,类似于 XHR 对象的 send() 方法初始化一个 http 请求。所以,必须对此绑定一些事件来监听文件读取的发生,例如 load 事件,表示文件读取完成,代码如下:

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);//以文本方式读取

此代码主要是通过文本(text/plain)凡是来读取数据,并将其在 控制台(console) 显示,当文件被成功读取,onload 事件触发,当文件读取出错, onerror 事件触发,在事件内部,FileReader 的实例,应该使用 event.target 而不是直接使用保存 reader 的变量,读取文件成功时, result 属性保存文件内容,读取文件失败时, result 属性保存错误信息。

使用 data URIs 读取数据

稍微改变一下上面的代码,就可以实现使用 data URIs/data URLs 读取数据,尤其是从本地读取比较小的图片,读取并且在浏览器中显示,是非常便利的。

var reader = new FileReader();
reader.onload = function(event) {//成功读取
    var dataUri = event.target.result,//数据内容
        img     = document.createElement("img");//创建一个 img 对象

    img.src = dataUri; //设置 img 对象的 src 属性值为 dataUri
    document.body.appendChild(img);//将 img 插入到 body 中
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};//读取文件错误是发生

reader.readAsDataURL(file);// 以 data url 方式读取数据

此代码将图片从本地以 data url 方式读取后,存入 img 对象的 src 属性中,然后直接在页面显示,如果可以,你可以直接将此图片放到页面上进行处理,不过要使用 <canvas> 才行。

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
    img     = new Image();
    img.onload = function() {// 等待图像文件被加载完
        canvas.drawImage(img, 100, 100);
    };
    img.src = dataUri;
};

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

此代码将图像文件加载完成之后,放到一个 canvas 画布中进行处理。

以 ArrayBuffers 方式读取

ArrayBuffer 最初是作为 WebGL 的一部分的,ArrayBuffer 代表一个可以存储任意任意大小的数字的一个有限的区域,此种方式读取的数据,必须使用特殊的方式访问,例如 Int8Array ,将此底层的数据视为 8 位的符号整数。或者 Float32Array 将其视为 32 位的浮点数,这些都被叫做类型化数组/格式化数组,都被强制的使用某种数据格式来使用,而不像普通格式的数据那样。

ArrayBuffer 主要用来处理二进制数据文件,已能够对数据具有更细粒度的控制,并且远远超出此篇文章解释的范围。反正在使用的时候,只要记住,你可以很简单的将一个文件读取为二进制缓冲,并且可以简单地将此数据通过 XHR 的 send() 方法发送给后端服务器(当然了,你必须从服务器上接受此二进制缓冲,并且重建此文件),但是浏览器还必须完整的支持 XMLHttpRequest Level 2,不过可惜的是,只有 IE10 以上的现代浏览器才支持。

预告
FileReader 的使用很简单,但是,如果你知道如何使用 XMLHttpRequest 的话,没有理由你不会用这种方式读取文件,下节,将介绍更多的关于 FileReader 的事件,和更多可能的错误。

使用 javascript 来操作文件,是严格被禁止的,因为你不想一打开网页,硬盘灯就狂闪,然后把你硬盘的文件/列表都慢慢的上传上去,那么你就危险了。所以一般情况下,javascript 操作文件,都是在网页中提供文件上传控件。此时,你需要允许,才会使此网页获得相应的文件的信息。HTML5 以前的文件上传控件,都是以

<input type="file">

来进行的,此时,我们会得到关于此文件的一些信息,包括。

name – 文件名
size – 文件大小
type – 文件的 MIME 类型。

而此时你就可以随时访问这些文件的属性而不用直接去操作文件。那么就用正常的表单方式上传就可以了。

获得文件属性

在点击浏览添加完文件之后,就可以使用如下的 javascript 代码来获取相应的文件属性了。此处使用了添加事件(change)的方式,当然一旦选择了文件之后,这些属性随时都可以获得。

<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
    // 当 control 改变的时候
    var i = 0,
        files = control.files,
        len = files.length;
    for (; i < len; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

当 your-files 这个对象发生改变的时候,就执行下面的代码。

拖动上传/Drag and drop

虽然之前的文件上传方式可以使用,但是总是不人性化,操作起来比较麻烦,而且还不强大。(其实我认为拖动上传也不人性化,最大化浏览器好好地,要上传了,先缩小浏览器窗口,然后在拖动?麻烦不!)
但是拖动上传总有他的优点呢。并且 html5 相对来说,给了上传文件更多的属性和事件。

例如,如下代码:

<div id="your-files">&lt;/div>
<script>
var target = document.getElementById("your-files");

target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {

    // 阻止浏览器默认动作
    event.preventDefault();

    var i = 0,
        files = event.dataTransfer.files,
        len = files.length;

    for (; i < len; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }

}, false);
</script>

当你将文件拖动到 your-files 区域的时候,就可以看到 控制台 里面输出文件的信息了。当然,此时还不能上传。

使用 Ajax 上传

获得此文件以及相应的信息之后,就可以开始上传了。当然这里使用 ajax 方式上传。使用了定义在 XMLHttpRequest Level 2 中的 FormData 对象,可以表示一个 HTML 表单,并且使用“属性:值” 这样的方式,使用 append() 方法来提交表单。

var form = new FormData();
form.append("name", "Nicholas");

FormData 对象的好处就是可以直接的获取文件内容。并且可以十分有效的模拟一个表单,而你只需要增加一些特别的信息,例如文件名等,其他的浏览器都会自己去做。

// 创建一个有多个数据的表单
var form = new FormData();
form.append("name", "Nicholas");
form.append("photo", control.files[0]);

// 通过 XHR 传送,没有传送 header!
var xhr = new XMLHttpRequest();
xhr.onload = function() {
    console.log("Upload complete.");
};
xhr.open("post", "/entrypoint", true);
xhr.send(form);

一旦通过 send() 方法提交表单之后,浏览器就会同时将 header 信息也提交给服务器。所以不用担心文件的编码问题。其实就像原始的表单提交一样,例如此处,对于 php 来说,就可以使用:

$_POST["name"];
$_POST["photo"];

来获取相应文件的信息了。不过目前只有现代浏览器才支持,例如 IE 要等到 10 才行。

下一节,虽然添加,上传文件很简单,这么点就弄完了,但是如何获取文件数据呢?这就是下节要讨论的了。

一些相关的链接:
File API specification (草案)(英文)
HTML5 Drag and Drop(英文)
XMLHttpRequest Level 2(英文)