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

想直接看干貨的直接跳到第二點(diǎn)

有時(shí)我們想在希望在表單提交前獲取到中選中圖片的一些信
息,比如說圖片的寬高等等,但是我們知道的,通過file控件的onchange事件只能獲取
到文件的一些基本信息,像文件大小,最后修改時(shí)間等等.

嗯哼,首先先想想前提,怎樣才能獲得一個(gè)圖片的寬高呢?!噢,只要先獲取到目標(biāo)圖
元素,那圖片元素怎么獲取呢?!第一種方式可以用過DOM操作獲得目標(biāo)(這里不再說明),然
后寬高通過對(duì)應(yīng)的width屬性和height屬性獲取,第二種是在js里面手動(dòng)創(chuàng)建一個(gè)Image
對(duì)象(下面有具體代碼事例),再給這個(gè)Image對(duì)象賦予對(duì)應(yīng)的src不就得了,哇哈哈,基本的
條理已經(jīng)梳理清楚了,那么請(qǐng)看下面的實(shí)際代碼操作:

① 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

    注意:這只是一個(gè)試驗(yàn)性的技術(shù)還不穩(wěn)固,語法未來可能會(huì)隨著瀏覽器的更新?lián)Q代
 隨之改變.
    
    window.URL屬性返回一個(gè)對(duì)象,這和對(duì)象提供了一個(gè)靜態(tài)createObjectURL()方法去
 創(chuàng)建和管理object URLs.

//基于jquery,選的某一個(gè)本地文件
$("#file").on("change",function () {
        let url = window.URL || window.webkitURL;
        console.log(url.createObjectURL(this.files[0]));//this.files[0]為選中的文件(索引為0因?yàn)槭菃芜x一個(gè)),這里是圖片
            let img = new Image();              //手動(dòng)創(chuàng)建一個(gè)Image對(duì)象
            img.src = url.createObjectURL(this.files[0]);//創(chuàng)建Image的對(duì)象的url
            img.onload = function () {
                console.log("height:"+this.height+"----width:"+this.width)
            }
    });

結(jié)果(google瀏覽器測試):

②HTML5中的FileReader

既然是HTML5中的方法,當(dāng)然一些ie低版本就使用不了啦,具體歡迎測試反饋,嘻嘻

   $("#file").on("change",function () {
        let reader = new FileReader();
        reader.readAsDataURL(this.files[0]);//這里把一個(gè)文件用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)
            }
        }

結(jié)果(google瀏覽器測試):

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