原生控件

<input id="uploadBtn" type="file"/>

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

文件信息

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)
}