-1

I have a form to send images, it works perfectly. But how to display an alert if the size or the extension of the file is not correct, or verify that it is indeed an image. I give you the code for my button.Thank you for help

  <button type="button" name="photo" value="Upload" onclick="submitUploadFileForm()" class="btn btn-primary btn-lg" style="width: 100px;height: 50px;color: #FFF;">Envoyer</button>
flexi2202
  • 11
  • 5
  • You can [get info on the chosen file via a JS DOM interface](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files), which should give you easy access to the size as well as the name. Whether it is "actually an image" is maybe a bit trickier-- I don't know how MIME type is determined, but my hunch is that if you went and took a `.txt` file and changed its extension to `.jpg` the browser might not be able to discern the difference... – Alexander Nied Jul 23 '21 at 22:14
  • Regarding telling if the file is actually an image-- you might be able to try to [load it somehow the page](https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) then [detect if it fails](https://stackoverflow.com/questions/9815762/detect-when-an-image-fails-to-load-in-javascript). – Alexander Nied Jul 23 '21 at 22:17

1 Answers1

1
  • Type : just add accept attribue in the input field (can save you to do test about the extension)
  • Size : in the submitUploadFileForm() function do this test : if(document.getElementById("inut id").files[0].size > x){ alert(check the size) return }
Ridha Mezrigui
  • 11
  • 2