使用HTML5和JQuery获得上传图片大小尺寸（高和宽）

技术频道 - js技术

使用HTML5和JQuery获得上传图片大小尺寸（高和宽）

作者:admin 时间:2019-8-26 18:9:47 浏览:

本文介绍如何使用HTML5和JQuery获得上传图片大小尺寸（高和宽）。

以下HTML标记由HTML FileUpload和Button组成。

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<input type="file" id="fileUpload" />
<input id="upload" type="button" value="Upload" />

<script type="text/javascript">
$(function () {
$("#upload").bind("click", function () {
    //获得FileUpload参数
    var fileUpload = $("#fileUpload")[0];
    //检测文件是否有效图片
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
   if (regex.test(fileUpload.value.toLowerCase())) {
      //检测是否支持HTML5
      if (typeof (fileUpload.files) != "undefined") {
        //初始化FileReader对象
        var reader = new FileReader();
        //读取图片文件
        reader.readAsDataURL(fileUpload.files[0]);
       reader.onload = function (e) {
          //初始化JavaScript图片对象
          var image = new Image();
          //FileReader获得Base64字符串
          image.src = e.target.result;
         image.onload = function () {
            //获得图片高宽
            var height = this.height;
           var width = this.width;
          alert("图片高=" + height + "px, 宽=" + width + "px");
           return true;
         };
       }
      }
      else {
        alert("浏览器不支持HTML5.");
       return false;
     }
   }
    else {
     alert("请选择有效的图片文件");
     return false;
   }
});
});
</script>

</body>
</html>