html5新属性previewFile

FileReader接口的方法
FileReader接口有4个方法，其中3个用来读取本地文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
FileReader接口的方法

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

读取上传的文件的尺寸以及大小

demo地址
html

js

function previewFile(targetInput){
    console.log(targetInput.files[0].size / (1024*2)+'M=================>')
    console.log(targetInput.value)   
    var reader = new FileReader(); 
    reader.addEventListener("load", function () {
         //加载图片获取图片真实宽度和高度    
         var image = new Image();    
         image.onload=function(event){    
             var width = image.width;    
             var height = image.height;    
             console.log(event)
             console.log(width)
             console.log(height) 
         };    
         image.src= reader.result;
      }, false);
      reader.readAsDataURL(targetInput.files[0]); 
}