获取在input:file中选中图片的宽高信息

一、前言
在很多表单提交中 我们希望<input type='file'/>能在表单之前获取到上传图片的一些基本信息 （比如 width、height）。
二、操作方法
① window.URL || window.webkitURL
注意:这只是一个试验性的技术还不稳固,语法未来可能会随着浏览器的更新换代
随之改变.
window.URL属性返回一个对象,这和对象提供了一个静态createObjectURL()方法去
创建和管理object URLs.

//基于jquery,选的某一个本地文件
$("#file").on('change',function(){
    let url = window.URL || window.webkitURL;
    console.log(url.createObjectURL(this.files[0]));
  //this.files[0]为选中的文件(索引为0因为是单选一个),这里是图片
  let img = new Image();              //手动创建一个Image对象
  img.src = url.createObjectURL(this.files[0]);//创建Image的对象的url
   img.onload = function () {
       console.log('height:'+this.height+'----width:'+this.width)
  }
})

②HTML5中的FileReader (不支持低版本ie)

   $('#file').on('change',function () {
            let reader = new FileReader();
            reader.readAsDataURL(this.files[0]);
          //这里把一个文件用base64编码,具体什么是base64编码,我将稍后在不久的文章中介绍
          reader.onload = function(e){
              let img = new Image();
              img.src = e.target.result;
              //获取编码后的值,也可以用this.result获取
              img.onload = function () {
                console.log('height:'+this.height+'----width:'+this.width)
              }
          }
    });

结论：两种方法都不兼容低版本浏览器哦。