Cacher is the code snippet organizer for pro developers

<form
  enctype="multipart/form-data"
  onsubmit="check(); return false;"
>
  <label>
    <input
      type="file"
      name="picture"
    >
  </label>
  <label>
    <input type="submit">
  </label>
</form>

<script>
  function check() {
    const picture = document.forms[0].picture.value;
    const regex = /^.+\.(jpe?g|gif|png)$/i;

    if (regex.test(picture)) {
	document.forms[0].submit();      
    } else {
	return false;
    }
  }
</script>

<form
  enctype="multipart/form-data"
  onsubmit="check(); return false;"
>
  <label>
    <input
      type="file"
      name="picture"
    >
  </label>
  <label>
    <input type="submit">
  </label>
</form>

<script>
  function check() {
    const picture = document.forms[0].picture.value;

    // 1.
    // const name = picture.substring(str.lastIndexOf('.') + 1);

    // 2.
    // const parts = picture.split('.');
    // const name = parts[parts.length - 1];

    // 3.
    const name = picture.split('.').pop();
    
    const isImage =['jpg', 'jepg', 'gif', 'png'];

    if (isImage.indexOf(name) > -1) {
      document.forms[0].submit();
    } else {
      return false;
    }
  }
</script>