-1

How can we display success or error message when correct jpeg file is upload. Then show success message like that https://ibb.co/j64FTf2 and when file is upload incorrect or any another extension like png or gif then its show error message like that https://ibb.co/0MFwtQs using html CSS bootstrap JavaScript or jQuery.

  <input type="file" class="form-control" id="inputPassword3" placeholder="Password" required />
Mystic Groot
  • 143
  • 2
  • 13
neha pandey
  • 1
  • 1
  • any one help me out – neha pandey Mar 08 '21 at 10:04
  • Hi Neha, you can set the ```accept``` attribute for the file. Such as ```accept="image/x-png,image/gif,image/jpeg"``` For more details please referrer this link [here](https://stackoverflow.com/a/6225815/1189070) – Himanshu Saxena Mar 08 '21 at 10:18
  • @HimanshuSaxena thanks for help this one is fine but when i upload the jpg file or png file then in display message show success how can we do that like this https://ibb.co/j64FTf2 https://ibb.co/0MFwtQs – neha pandey Mar 08 '21 at 10:21
  • Questions should be helpful to future readers. Instead of linking to an external site that may change in time, provide a working code example that demonstrates the issue. – Carol Skelly Mar 08 '21 at 16:36

1 Answers1

0

function fileValidation() {
            let errorElement = document.getElementById("error");
            errorElement.innerHTML = "";
            var fileInput =  
                document.getElementById('file'); 
              
            var filePath = fileInput.value; 
          
            // Allowing file type 
            var allowedExtensions =  
                    /(\.jpg|\.jpeg)$/i; 
              
            if (!allowedExtensions.exec(filePath)) { 
                errorElement.innerHTML = "File type should be jpeg or jpg";
                fileInput.value = ''; 
                return false; 
            }  
            else  
            { 
              
                // Image preview 
                if (fileInput.files && fileInput.files[0]) { 
                    var reader = new FileReader(); 
                    reader.onload = function(e) { 
                        document.getElementById( 
                            'imagePreview').innerHTML =  
                            '<img src="' + e.target.result 
                            + '"/>'; 
                    }; 
                      
                    reader.readAsDataURL(fileInput.files[0]); 
                } 
            } 
        }
<input type="file" id="file"
        onchange="return fileValidation()" />
        <div id="error"></div>
Anmol
  • 1
  • 1