JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】

2023年5月28日上午10:48 • JavaScript

下面是JS实现获取图片大小和预览的方法完整实例攻略：

1. 需求说明

我们想要做一个功能，可以让用户上传图片，并且在上传图片前可以对图片进行大小预览。同时，需要能够兼容IE和其它浏览器。

2. 技术方案

我们可以使用HTML5的File API来获取图片大小和预览图片，在IE浏览器中我们可以使用IE浏览器特有的ActiveXObject来代替File API实现相同的效果。

3. 具体实现

3.1 获取图片大小

使用File API获取图片的大小，示例代码如下：

function getImageSize(inputFile) {
  var file = inputFile.files[0];
  var img = new Image();
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    img.src = e.target.result;
    img.onload = function() {
      console.log("图片大小为：" + img.width + "*" + img.height);
    }
  }
}

上述代码中，我们首先获取了用户上传的文件和一个Image对象。通过FileReader对象的readAsDataURL方法，我们将图片文件读入内存中，然后通过将图片的dataURL设置到Image对象的src属性中，来获取图片的大小。

3.2 预览图片

同样使用File API来预览图片，示例代码如下：

function previewImage(inputFile, imgElement) {
  var file = inputFile.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    imgElement.src = e.target.result;
  }
}

上述代码中，我们同样是先获取用户上传的文件，然后将图片的dataURL赋值给img标签的src属性，来完成图片的预览。

4. 完整代码

下面是结合上述两个示例的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图片上传</title>
  </head>
  <body>
    <input type="file" onchange="getImageSize(this);previewImage(this, img);" />
    <img id="img" />
    <script>
      function getImageSize(inputFile) {
        var file = inputFile.files[0];
        var img = new Image();
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
          img.src = e.target.result;
          img.onload = function() {
            console.log("图片大小为：" + img.width + "*" + img.height);
          }
        }
      }

      function previewImage(inputFile, imgElement) {
        var file = inputFile.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
          imgElement.src = e.target.result;
        }
      }
    </script>
  </body>
</html>