FileReader获取上传图片的宽高

input upload 图片上传，经常要判断上传图片的宽高。除了运用一些上传插件可以获取。原生的上传方式也可以获取，下面就说一下如何获取上传图片的宽高。

例：

<el-upload

drag

:action="/upload"

accept="image/png, image/jpeg, image/gif, image/jpg"

:headers="headers"

:on-success ="successUploads"

:before-upload ="uploadyanzheng"

name="image"

multiple>

<i class="el-icon-upload"></i>

<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

</el-upload>

上传前的验证：

uploadyanzheng(file) {

      let _this = this

    //普通的判断可以用return false

      // 获取文件尺寸，判断尺寸在不在规定范围之内

      return new Promise(function(resolve, reject) {

        let reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = function(theFile) {

          let image = new Image()

          image.src = theFile.target.result

          image.onload = function() {

            let csize = `${this.width}*${this.height}`

            if (!_this.creativeSize.includes(csize)) {//this.creativeSize是可以上传的尺寸列表数组

              _this.$message.error(`${file.name}尺寸不对，请重新上传！`)

              reject('图片尺寸不对')

            } else {

              file.width = this.width

              file.height = this.height

              resolve(file)

            }

          }

        }

      })

    },

普通input file 上传

<input type="file" size="20" autocomplete="off" id="upload_img" name="Uploadfile">

var MyTest = document.getElementById("upload_img").files[0];

var reader = new FileReader();

reader.readAsDataURL(MyTest);

reader.onload = function(theFile) {

　　var image = new Image();

   image.src = theFile.target.result;

   image.onload = function() {

   　　alert("图片的宽度为"+this.width+",长度为"+this.height);

   };

};

FileReader介绍

FileReader()是一个构造函数，关于该函数的详细介绍，可以查看：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

用法-访问选择的文件

可以通过

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

<div id="szhulian"></div>

function handleFiles(files) {

  for (var i = 0; i < files.length; i++) {

    var file = files[i];

    var imageType = /^image\//;

    if (!imageType.test(file.type)) {

      continue;

    }

    var img = document.createElement("img");

    img.classList.add("obj");

    img.file = file;

   $("#haorooms").appendChild(img); // 把上传的图片添加到展示的div中

    var reader = new FileReader();

    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);

    reader.readAsDataURL(file);

  }

}