FileReader获取上传图片的宽高

2018-08-14 1852 3 编辑:深正互联 来源:互联网

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);

  }

}


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5