摘要：前言想直接看干貨的直接跳到第二點有時我們想在希望在表單提交前獲取到中選中圖片的一些信息比如說圖片的寬高等等但是我們知道的通過控件的事件只能獲取到文件的一些基本信息像文件大小最后修改時間等等嗯哼首先先想想前提怎樣才能獲得一個圖片的寬高呢噢只要

想直接看干貨的直接跳到第二點

有時我們想在希望在表單提交前獲取到中選中圖片的一些信
息,比如說圖片的寬高等等,但是我們知道的,通過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瀏覽器測試):

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