公告:由于博客https升级,原博客引用http链接失效,预览及部分图片效果请查看源代码!

FileReader获取上传图片的宽高

587次浏览

前言

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="haorooms"></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);
  }
}

关于上传

关于图片上传,我之前也有类似文章,input file 文件上传,js控制上传文件的大小和格式accept设置

css input[type=file] 样式美化

Tags: js FileReader

相关文章: