input標籤獲取圖片文件尺寸

  • 思路分析
    • (1)給input標籤設置一個onchange事件
      • 當input標籤的type屬性爲file時,我們可以給該input標籤設置一個onchange事件來監聽文件選擇的變化
  • (2)在onchange事件中使用FileReader讀取選取文件的信息
    • FileReader類支持異步讀取input標籤文件信息(大小,時間,數據等)
  • (3)使用一個img標籤來顯示獲取的圖片(如果不需要顯示可以設置hidden隱藏)
    • 之所以需要這一步,是因爲FileReader無法獲取圖片的大小,它只能得到文件的數據,所以需要將文件數據賦值給img標籤的src屬性
  • (4)通過img標籤的offsetHeightoffsetWidth獲取圖片的尺寸

  • 效果演示

這裏寫圖片描述

  • 完整代碼

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>



<body>

    <form id="form">

        <!-- 1.給input標籤添加一個onchange事件:一旦選擇文件發生變化則會觸發   目的:獲取選擇圖片的原始數據 -->

        <input type="file" id="exampleInputFile" name="icon" onchange=uploadImg(this)>

        <!-- 2.用一個img標籤來接收文件數據  目的:(1)先接收文件數據  (2)通過offsetHeight屬性獲取寬高 -->

        <img src="" alt="" id="11111">

        <p>請上傳圖片.</p>

    </form>

</body>



<script>

    //選擇圖片,馬上預覽

    function uploadImg(obj) {



        //1.讀取文件詳細信息

        var file = obj.files[0];



        console.log(obj);

        console.log(file);

        //2.使用FileReader讀取文件信息

        var reader = new FileReader();



        //4.監聽讀取文件過程方法,異步過程

        reader.onloadstart = function (e) {

            console.log("開始讀取....");

        }

        reader.onprogress = function (e) {

            console.log("正在讀取中....");

        }

        reader.onabort = function (e) {

            console.log("中斷讀取....");

        }

        reader.onerror = function (e) {

            console.log("讀取異常....");

        }

        reader.onload = function (e) {

            console.log("成功讀取....");



            console.log(this.reault);

            //或者 img.src = this.result;  //e.target == this

            var img = document.getElementById("11111");



            //將解析的base64字符串賦值給img標籤

            img.src = e.target.result;

            //5.這裏需要異步獲取,避免線程延遲

            setTimeout(function(){

                window.alert('高度' + img.offsetHeight + '寬度' + img.offsetWidth);

            },1000);



        }

        //3.開始讀取

        reader.readAsDataURL(file)

    }

</script>




</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章