html5 file文件,HTML5 File API

原生控件

我是一个萌萌的原生上传控件

文件信息

var uploadBtn = document.getElementById('uploadBtn'),

file = uploadBtn.files;

file存储着上传文件的信息

值得一提的是，重复上传文件并不会使FileList增加元素，而是替代了FileList[0]

FileReader

var reader = new FileReader()

// 四种读取文件的方式，以名思义(常用前二)

// reader.readAsText(file, encoding)

// reader.readAsDataURL(file) // 常用于图片

// reader.readAsBinaryString(file)

// reader.readAsArrayBuffer(file)

reader.readyState 记录着reader的状态。

0：new之后

1：执行上述四个读取方法之一后

2：读取完毕，触发onload事件

Event

// 上传进度

reader.onprogress = function(ev) {

if (ev.lengthComputable) { // 文件的长度是否可计算

ev.total // 文件总长

ev.loaded // 已加载

}

}

// 上传成功

reader.onload = function() {

reader.result // 文件信息

}

// 上传失败

reader.onerror = function() {

reader.error // 错误信息

}

// 上传完成

reader.loadend

// 上传开始

reader.loadstart

小技巧

在上述文件信息中，我们可以发现File.size表示的是图片的字节大小，那么，图片的尺寸信息去哪儿找呢？

reader.onload = function() {

var image = new Image();

image.src = this.result;

console.log(image.width)

console.log(image.height)

}