input标签获取图片文件尺寸

  • 思路分析
    • (1)给input标签设置一个onchange事件
      • 当input标签的type属性为file时,我们可以给该input标签设置一个onchange事件来监听文件选择的变化
  • (2)在onchange事件中使用FileReader读取选取文件的信息
    • FileReader类支持异步读取input标签文件信息(大小,时间,数据等)
  • (3)使用一个img标签来显示获取的图片(如果不需要显示可以设置hidden隐藏)
    • 之所以需要这一步,是因为FileReader无法获取图片的大小,它只能得到文件的数据,所以需要将文件数据赋值给img标签的src属性
  • (4)通过img标签的offsetHeightoffsetWidth获取图片的尺寸

  • 效果演示

input标签获取图片文件尺寸_第1张图片

  • 完整代码



<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>Documenttitle>

head>



<body>

    <form id="form">

        

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

        

        <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>

你可能感兴趣的:(Web前端开发)