How to allow input type=“file” to accept only image files

You can use following :

<input type="file" name="picture1" accept=".png, .jpg, .jpeg" />

You need to use following client side code:

var selectedFile = this.files[0];
var idxDot = selectedFile.name.lastIndexOf(".") + 1;
var extFile = selectedFile.name.substr(idxDot, selectedFile.name.length).toLowerCase();
if (extFile == "jpg" || extFile == "jpeg" || extFile == "png" || extFile == "svg" || extFile == "gif") {
   //do whatever want to do
} else {
     alert("Only jpg/jpeg, png, gif and svg files are allowed!");
}

with following html code:

<input type="file" name="picture1" accept="image/*">

You can try following example:

Html:

  <div>
    <label for="image_uploads">Choose image to upload (PNG, JPG)</label>
    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png">
  </div>
  <div class="preview">
    <p>No files currently selected for upload</p>
  </div>

JS:

var input = document.querySelector('input');
var preview = document.querySelector('.preview');

input.style.opacity = 0;input.addEventListener('change', updateImageDisplay);function updateImageDisplay() {
  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  var curFiles = input.files;
  if(curFiles.length === 0) {
    var para = document.createElement('p');
    para.textContent = 'No files currently selected for upload';
    preview.appendChild(para);
  } else {
    var list = document.createElement('ol');
    preview.appendChild(list);
    for(var i = 0; i < curFiles.length; i++) {
      var listItem = document.createElement('li');
      var para = document.createElement('p');
      if(validFileType(curFiles[i])) {
        para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
        var image = document.createElement('img');
        image.src = window.URL.createObjectURL(curFiles[i]);

        listItem.appendChild(image);
        listItem.appendChild(para);

      } else {
        para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}var fileTypes = [
  'image/jpeg',
  'image/pjpeg',
  'image/png'
]

function validFileType(file) {
  for(var i = 0; i < fileTypes.length; i++) {
    if(file.type === fileTypes[i]) {
      return true;
    }
  }

  return false;
}function returnFileSize(number) {
  if(number < 1024) {
    return number + 'bytes';
  } else if(number >= 1024 && number < 1048576) {
    return (number/1024).toFixed(1) + 'KB';
  } else if(number >= 1048576) {
    return (number/1048576).toFixed(1) + 'MB';
  }
}

CSS:

html {
  font-family: sans-serif;
}

ol {
  padding-left: 0;
}

li, div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

img {
  height: 64px;
  order: 1;
}

p {
  line-height: 32px;
  padding-left: 10px;
}

label, form button {
  background-color: #7F9CCB;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

label:hover, form button:hover {
  background-color: #2D5BA3;
  color: white;
}

label:active, form button:active {
  background-color: #0D3F8F;
  color: white;
}