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="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] 樣式美化

 

FileReader預覽上傳圖片（2018-09-21補充）

---

這個案例是參考張鑫旭的直接剪切板粘貼上傳圖片的前端JS實現, 這里也用到了FileReader，所以在這里補充一下：

HTML代碼：

<div id="preview"></div>
<p id="log"></p>

JS代碼：

document.addEventListener('paste', function (event) {
    var items = (event.clipboardData || window.clipboardData).items;
    var file = null;
    if (items && items.length) {
        // 搜索剪切板items
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
                file = items[i].getAsFile();
                break;
            }
        }
    } else {
        log.innerHTML = '<span style="color:red;">當前瀏覽器不支持</span>';
        return;
    }
    if (!file) {
        log.innerHTML = '<span style="color:red;">粘貼內容非圖片</span>';
        return;
    }
    // 此時file就是我們的剪切板中的圖片對象
    // 如果需要預覽，可以執行下面代碼
    var reader = new FileReader()
    reader.onload = function(event) {
        preview.innerHTML = '<img src="' + event.target.result + '" class="upload-image">';
    }
    reader.readAsDataURL(file);
    // 如果不需要預覽，上面這段可以忽略

    // 這里是上傳
    var xhr = new XMLHttpRequest();
    // 上傳進度
    if (xhr.upload) {
        xhr.upload.addEventListener('progress', function (event) {
            log.innerHTML = '正在上傳，進度：' + Math.round(100 * event.loaded / event.total) / 100 + '%';
        }, false);
    }
    // 上傳結束
    xhr.onload = function () {
        var responseText = xhr.responseText;
        log.innerHTML = '上傳成功，地址是：' + responseText;
    };
    xhr.onerror = function () {
        log.innerHTML = '<span style="color:red;">網絡異常，上傳失敗</span>';
    };
    xhr.open('POST', './upload.php', true);
    xhr.setRequestHeader('FILENAME', encodeURIComponent(file.name));
    xhr.send(file);
});