Question 11201 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Check file extension and alert user if isn't image file using javascript – Jquery

When i upload multiple images and one of them which is not valid extension and message should be shown File type is not valid and when I upload images one by one it works perfect please help me how can resolve that ? thank u

enter image description here

javascript

  $("input[type=file]").on('change', function(){
    
       //Get uploaded file extension
        var extension = $(this).val().split('.').pop().toLowerCase();
        // Create array with the files extensions that we wish to upload
        var validFileExtensions = ['jpeg', 'jpg', 'png'];
        //Check file extension in the array.if -1 that means the file extension is not in the list.
        if ($.inArray(extension, validFileExtensions) == -1) {
            $('#filetype').text("File type is not valid").show();
            $('#btnSubmit').prop('disabled', true);
        }
    
    });
Tags:

2

Answers


  1. 0 
    const fileInput = document.querySelector('input[type="file"]');
const submitBtn = document.querySelector('button[type="submit"]');
 submitBtn.disabled = true;
    fileInput.addEventListener('change', () => {
      const fileName = fileInput.value;
      const fileType = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
      if (fileType !== 'jpg' && fileType !== 'jpeg' && fileType !== 'png' && fileType !== 'gif') {
        alert('File is not an image');
        fileInput.value = '';
        submitBtn.disabled = true; // Disable the submit button
  } else {
    submitBtn.disabled = false; // Enable the submit button
  }
  });
        .fileInput{
    text-align:center;
    margin-top:10%;
    }
        <div class="fileInput">
    <input type="file" id="fileInput">
    <button type="submit">Upload</button>
    </div>
    Login or Signup to reply.
  2. 0

    With the multiple attribute added to the input HTML tag, iterate the files property on the input element in the change event listener.

    document.addEventListener('DOMContentLoaded', function () {
    document.querySelector("input").addEventListener("change", changeHandler);
});

function changeHandler() {
    const validFileExtensions = ['jpeg', 'jpg', 'png'];
    // 'this' refers to the 'input' HTML element
    // Assigning 'this' to the 'element' variable is not 
    // necessary but assigned here for code readability.
    let element = this;
    // Check if the element has a FileList before checking each file
    if (element.files && element.files.length) {
        for (i = 0; i < element.files.length; i++) {
            const file = element.files[i];
            const filename = file.name;
            const extension = filename.split('.').pop();
            if (validFileExtensions.includes(extension)) {
                console.log("VALID file -> " + filename);
            }
            else {
                console.log("INVALID file -> " + filename);
            }
        }
    }
}
    <input type="file" multiple />

    Applying the code above to your jQuery code:

    $("input[type=file]").on('change', function() {

  //Get uploaded file extension
  var extension = $(this).val().split('.').pop().toLowerCase();
  // Create array with the files extensions that we wish to upload
  var validFileExtensions = ['jpeg', 'jpg', 'png'];
  //Check file extension in the array.if -1 that means the file extension is not in the list.
  if ($.inArray(extension, validFileExtensions) == -1) {
    $('#filetype').text("File type is not valid").show();
    $('#btnSubmit').prop('disabled', true);
  }
  // Check if the element has a FileList before checking each file
  if (this.files && this.files.length) {
    var message = "";
    for (i = 0; i < this.files.length; i++) {
      var file = this.files[i];
      var filename = file.name;
      var extension = filename.split('.').pop();
      if (!validFileExtensions.includes(extension)) {
        message += filename + " is not a valid file type. ";
      }
    }
    if (message !== "") {
      $('#filetype').text(message).show();
      $('#btnSubmit').prop('disabled', true);
    }
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="fileInput" multiple>
<span id="filetype"></span>
<button type="submit">Upload</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search