1

I wanna validate images format during submit or onchange which will browse by multiple file up loader.

But after Google and on SO i am can't find multiple image browse validation in JS script.. Here is HTML

<input type="file" id='uploadImg' name='uploadImg[]' multiple >
<input id="imgaeupload" value="Submit" type="submit" name='uploadImage'/>

2 Answers 2

5

Files property of the file upload element holds the list of selected files, you can iterate over the list and validate each file:

 function validate() {
    var uploadImg = document.getElementById('uploadImg');
    //uploadImg.files: FileList
    for (var i = 0; i < uploadImg.files.length; i++) {
       var f = uploadImg.files[i];
       if (!endsWith(f.name, 'jpg') && !endsWith(f.name,'png')) {
           alert(f.name + " is not a valid file!");
           return false;
       } else {
           return true;

       }
    }
}

function endsWith(str, suffix) {
   return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
Sign up to request clarification or add additional context in comments.

1 Comment

Simple but great solution.
0

Make Common function in javascript for image upload validation

  1. In HTML file

    &lt;input type="file" name="productImage_name[]" multiple="multiple" onchange="imageTest(this)"&gt;
    
  2. In Java Script file

     function imageTest(field){
        var regex =  /(\.jpg|\.jpeg|\.png|\.gif)$/i; // Check file type .jpg, .jpeg, .png, .gif etc.
    
     var target = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
     // target = http:  //  localhost  /  KapdaSearch/V1/Development/public/company
    
     var fileUploadPath = target.replace(/public.*/, "public/storage/images/"); // Here 1st parameter is regular expression 2nd is replace string with
     // fileUploadPath = http://localhost/KapdaSearch/V1/Development/public/storage/images/
    
    //alert(field.value); // It gives you fake path of file because of some security reason like C:/fakepath/abc.png
    // We need only file name so use field.files[0].name instead of field.value
    
    // Image validation when you select multiple images at once
     for(var i=0; i<field.files.length; i++){
    var fieldName = field.files[i].name; // Guess file name = xyz.png   
    
    var imgPath = fileUploadPath+fieldName; 
    // http://localhost/KapdaSearch/V1/Development/public/storage/images/xvz.png
    // Check file type is correct or not
    if(fieldName.match(regex)){
        // Check file already exist or not
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open('HEAD', imgPath, false);
        xmlhttp.send();
        if (xmlhttp.status == "404") {
            field.setCustomValidity('');
        } else {
            field.setCustomValidity('This '+fieldName+' is already exist. Change file name than upload..');
        }
    }
    else{
        field.setCustomValidity('This '+fieldName+' is invalid..');
    }
    } //End for loop
    } // End function
    

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.