具有多個輸入的多個圖像需要大小驗證和文件預覽

Question

我的圖像預覽工作正常，但我想添加文件大小限制和圖像類型驗證... ** HTML

<form method="post" enctype="multipart/form-data" id="mainform">
  Imagine 1:<br />
  <input type="file" name="img1" id="img1" /><br />
  <img id="preview-img1" />
  <br /><br />
  Imagine 2 :<br />
  <input type="file" name="img2" id="img2" /><br />
  <img id="preview-img2" />
  <br />
  Imagine 3 :<br />
  <input type="file" name="img3" id="img3" /><br />
  <img id="preview-img3" />
  <br />
  Imagine 4 :<br />
  <input type="file" name="img4" id="img4" /><br />
  <img id="preview-img4" />
  <br />
  Imagine 5 :<br />
  <input type="file" name="img5" id="img5" /><br />
  <img id="preview-img5" />
  <br />
  Imagine 6 :<br />
  <input type="file" name="img6" id="img6" /><br />
  <img id="preview-img6" />
  <br />
  Imagine 7 :<br />
  <input type="file" name="img7" id="img7" /><br />
  <img id="preview-img7" />
  <br />
  Imagine 8 :<br />
  <input type="file" name="img8" id="img8" /><br />
  <img id="preview-img8" />
  <br />
  Imagine 9 :<br />
  <input type="file" name="img9" id="img9" /><br />
  <img id="preview-img9" />
  <br />
  Imagine 10 :<br />
  <input type="file" name="img10" id="img10" /><br />
  <img id="preview-img10" />
</form>

js 代碼適用於 IMG prev

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      imgId = '#preview-' + $(input).attr('id');
      $(imgId).attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

$("form#mainform input[type='file']").change(function () {
  readURL(this);
});

目前，圖像預覽工作正常我想添加這樣的文件大小限制和圖像類型驗證

<script type="text/javascript">
  function validateImage(id) {
    var formData = new FormData();
    var file = document.getElementById(id).files[0];
    formData.append("Filedata", file);
    var t = file.type.split("/").pop().toLowerCase();
    if (t != "jpeg" && t != "jpg" && t != "png" && t != "bmp" && t != "gif") {
      alert("Please select a valid image file");
      document.getElementById(id).value = "";
      return false;
    }
    if (file.size > 2000000) {
      alert("Max Upload size is 2MB only");
      document.getElementById(id).value = "";
      return false;
    } else {
      var output = document.getElementById("output");
      output.src = URL.createObjectURL(event.target.files[0]);
      output.onload = function () {
        URL.revokeObjectURL(output.src); // free memory
      };
      return true;
    }
  }
</script>

如何向此代碼添加圖像大小、類型和驗證？

Answer 1

您可以創建自定義函數來從上傳的文件加載圖像，如下所示：

async function loadImage(uploadedFile) {
  return new Promise((resolve) => {
    let img = new Image();
      img.onload = function () {
        resolve({ width: img.width, height: img.height, src: img.src });
      };
      img.src = window.URL.createObjectURL(uploadedFile);
    });
  }
}

然后在另一個函數中調用loadImage()函數並執行所有驗證，例如：

const checkImageSize (inputFile) => {   
  return loadImage(inputFile).then(res => if (res.width <= 400 && res.height <= 200) {
    console.log("Your image width is <= 400px and heigth <= 200px.")   
  }).catch(err => console.log(err));
}