獲取在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.結論

這兩種方式都有低版本瀏覽器不兼容的現象,但考慮到它們會逐漸退出市場,因此先大膽
用吧,遇到問題再討論,拜了個拜.