input标签获取图片文件尺寸

思路分析
- （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 == thisvar 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>

input标签获取图片文件尺寸相关推荐

input标签与图片按钮水平对齐的解决方法
解决方法其实很简单,只要加上vertical-align:middle属性就可以了. <input name="veryhuo" type="text" ...
多个class相同的input标签获取当前值！方法！
2019独角兽企业重金招聘Python工程师标准>>> var a= $(this).prev( ".你的class" ).val(); 转载于:https:// ...
android手机上传不了图片,【报Bug】nvue页面使用web-view组件，安卓手机无法调用页面的input标签上传图片...
详细问题描述 nvue页面,使用web-view原生组件,导致web-view加载的网页页面不能触发input标签进行图片上传,导致这样的原因大致百度了一下是因为安卓5.0及以上使用input typ ...
input标签的值只能两位小数_Day51 HTML表格表单标签、flask框架
目录表格标签表单标签 action标签 input标签 select标签 textarea标签 form表单提交文件需要注意 flask框架 1.表格标签 <!DOCTYPE html> ...
在 mousedown 事件中让 input 标签获取焦点的问题
问题我们先来看如下的代码: <body><button id="button">点击</button><div class=" ...
php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图效果图我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
文章目录博客内容介绍 input 全部类型 file 类型属性 accept属性 multiple属性事件监听 css样式更改上传图片文件,获取图片地址 input type file上传文 ...
通过jquery获取td下的input标签的值，并且改变onclick的参数值
一.背景这几篇博客貌似我都是记在笔记本上超过一个月了,手动捂脸!我自己看着都有点陌生,行吧,就当重温一下当时碰到的问题了. 背景是要获取table标签里面的td下的input的对象,并修改它的onc ...
input元素选择图片，并转换为base64格式在img标签显示
#input元素选择图片,并转换为base64格式在img标签显示 <body><input type="file"><img src="& ...

input标签获取图片文件尺寸

input标签获取图片文件尺寸相关推荐

最新文章

热门文章