input[type=file]获取图片宽高尺寸进行判断

六月初六月初 JavaScipt 2019-03-21 10:58:00

input[type=file]单图上传实现在前端预览并且获取预览图片的宽高设置！

效果预览：


获取图片实际宽高关键代码：

var fileData = this.files[0];
//读取图片数据
var reader = new FileReader();
reader.onload = function (e) {
 var data = e.target.result;
 //加载图片获取图片真实宽度和高度
var image = new Image();
 image.onload=function(){
	 var width = image.width;
	 var height = image.height;
	 alert("宽：："+width+"高：："+height)
 };
 image.src= data;
};
reader.readAsDataURL(fileData);

示例完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <input type="file" id="imgurl"  accept="image/png,image/gif,image/jpeg"/>
        <br/>
        <p class="imgbox">
            
        </p>
        <script>
            $('input[type=file]').on('change',function(){
				
				var fileData = this.files[0];
				 //读取图片数据
				 var reader = new FileReader();
				 reader.onload = function (e) {
					 var data = e.target.result;
					 //加载图片获取图片真实宽度和高度
				   var image = new Image();
					 image.onload=function(){
						 var width = image.width;
						 var height = image.height;
						 alert("宽：："+width+"高：："+height)
					 };
					 image.src= data;
				 };
				 reader.readAsDataURL(fileData);
				 
				var reader=new FileReader();
				  reader.onload=function(e){
				  console.log( reader.result);  //或者 e.target.result都是一样的，都是base64码
				  $(".imgbox").html(reader.result)
				}  
				reader.readAsDataURL(this.files[0])
				//filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一个图片文件转化为base64的码
            })
        </script>
    </body>
</html>

本例大致讲解：

使用FileReader对象获取到图片的信息，再实例图片，获取图片真实宽高！

下方代码将图片转出base64传输出来，可以实时展示在前端页面，也可将base64的数据传输给后台，后台转义后再进行存储！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！