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

摘要：前言想直接看干货的直接跳到第二点有时我们想在希望在表单提交前获取到中选中图片的一些信息比如说图片的宽高等等但是我们知道的通过控件的事件只能获取到文件的一些基本信息像文件大小最后修改时间等等嗯哼首先先想想前提怎样才能获得一个图片的宽高呢噢只要

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

有时我们想在希望在表单提交前获取到中选中图片的一些信
息,比如说图片的宽高等等,但是我们知道的,通过file控件的onchange事件只能获取
到文件的一些基本信息,像文件大小,最后修改时间等等.

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

① 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浏览器测试):

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