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

最新推荐文章于 2022-08-03 20:06:19 发布

weixin_34409357

最新推荐文章于 2022-08-03 20:06:19 发布

阅读量1.7k

点赞数 2

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000012088214

版权

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.结论

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