input标签获取图片文件尺寸

最新推荐文章于 2024-05-09 00:34:57 发布

坤小

最新推荐文章于 2024-05-09 00:34:57 发布

阅读量7.1k

点赞数 1

分类专栏： Web前端开发文章标签： input标签图片尺寸

本文链接：https://blog.csdn.net/u013263917/article/details/78699111

版权

Web前端开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

这里写图片描述

完整代码


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

坤小

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
input标签获取图片文件尺寸

思路分析（1）给input标签设置一个onchange事件当input标签的type属性为file时，我们可以给该input标签设置一个onchange事件来监听文件选择的变化（2）在onchange事件中使用FileReader读取选取文件的信息 FileReader类支持异步读取input标签文件信息（大小，时间，数据等）（3）使用一个img标签来显示获取的图片（如果不需要显示可以
复制链接

扫一扫