CODEWITHSUNDEEP
phpjavascriptjqueryhtml
Naresh
Naresh

Reputation: 2781

Validate multiple image format in JS in multipler file uploader

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

Upvotes: 1

Views: 3218

Answers (2)

Deep Gandhi
Deep Gandhi

Reputation: 79

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

Upvotes: 0

Marko Jurisic
Marko Jurisic

Reputation: 854

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

Upvotes: 5

Related Questions