multiple image with multiple input want size validation and file preview

user_13924589 0
Viewed 323

My image preview is working fine, but I want to add the file size limit and image type validation... **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>

The js code works correctly for 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);
});

Currently, the image preview is working correctly I want to add file size limit and image type validation like these

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

How can I add image size, type, and validation to this code?

php jquery javascript
1 Answers

You can create custom function to load image from uploaded file, something like this:

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

Then in another function call loadImage() function and do all of your validation, for example:

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));
}
user_123615760
Related