波多野结衣一区二区三区在线播放,雷电将军和丘丘人繁衍后代,国产高清不卡一区二区

技術(shù)頻道 - js技術(shù)

使用HTML5和JQuery獲得上傳圖片大小尺寸（高和寬）

作者:admin 時(shí)間:2019-8-26 18:9:47 瀏覽:

本文介紹如何使用HTML5和JQuery獲得上傳圖片大小尺寸（高和寬）。

使用HTML5和JQuery獲得上傳圖片大小尺寸（高和寬）

以下HTML標(biāo)記由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參數(shù)
    var fileUpload = $("#fileUpload")[0];
    //檢測(cè)文件是否有效圖片
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
   if (regex.test(fileUpload.value.toLowerCase())) {
      //檢測(cè)是否支持HTML5
      if (typeof (fileUpload.files) != "undefined") {
        //初始化FileReader對(duì)象
        var reader = new FileReader();
        //讀取圖片文件
        reader.readAsDataURL(fileUpload.files[0]);
       reader.onload = function (e) {
          //初始化JavaScript圖片對(duì)象
          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("請(qǐng)選擇有效的圖片文件");
     return false;
   }
});
});
</script>

</body>
</html>