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

1. 前言

想直接看干货的直接跳到第二点

有时咱们想在但愿在表单提交前获取到<input type='file'/>中选中图片的一些信
息,好比说图片的宽高等等,可是咱们知道的,经过file控件的onchange事件只能获取
到文件的一些基本信息,像文件大小,最后修改时间等等.

嗯哼,首先先想一想前提,怎样才能得到一个图片的宽高呢?!噢,只要先获取到目标图
元素,那图片元素怎么获取呢?!第一种方式能够用过DOM操做得到目标(这里再也不说明),然
后宽高经过对应的width属性和height属性获取,第二种是在js里面手动建立一个Image
对象(下面有具体代码事例),再给这个Image对象赋予对应的src不就得了,哇哈哈,基本的
条理已经梳理清楚了,那么请看下面的实际代码操做:

2. 操做方法

① window.URL || window.webkitURL

Basic support:
Chrome:8.0[2]
Firefox (Gecko): 4.0 (2.0)[1] 19.0 (19.0)
ie:10.0
Opera:15.0[2]
Safari:6.0[2] 7.0

注意:这只是一个试验性的技术还不稳固,语法将来可能会随着浏览器的更新换代
 随之改变.
    
    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)
            }
    });

结果(google浏览器测试):

②HTML5中的FileReader

既然是HTML5中的方法,固然一些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)
            }
        }

结果(google浏览器测试):

3.结论

这两种方式都有低版本浏览器不兼容的现象,但考虑到它们会逐渐退出市场,因此先大胆
用吧,遇到问题再讨论,拜了个拜.