jQuery - INPUT type = File, Image FileType Параметры проверки?

Вы хотите проверить значение элемента, например:

$("#user_profile_pic").change(function() {

    var val = $(this).val();

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif': case 'jpg': case 'png':
            alert("an image");
            break;
        default:
            $(this).val('');
            // error message here
            alert("not an image");
            break;
    }
});

Изменить

Код изменен на основе комментария - теперь удаляет значение выбранного файла, если не изображение.

Это довольно просто, не требуется никаких проверок JavaScript. Просто напишите это, и он будет принимать только файлы изображений.

 <input type="file" multiple accept='image/*'> 

Вы можете использовать регулярное выражение:

var val = $("#user_profile_pic").val();
if (!val.match(/(?:gif|jpg|png|bmp)$/)) {
    // inputted file path is not an image of one of the above types
    alert("inputted file path is not an image!");
}

Конечно, вы можете добавить к регулярному выражению больше форматов. Существуют более сложные и всесторонние способы сделать это, но этот метод выполнит задачу до тех пор, пока введенный путь к файлу изображения заканчивается на стандартном расширении файла изображения.

Могут быть браузеры, которые позволяют вам создать <img/> заданного пути, тем самым вы можете проверить, является ли это реальным изображением или нет (если нет, событие onerror должно срабатывать на изображении, и оно будет иметь ширину / высоту 0 ).

Но поскольку это работает только в некоторых браузерах и представляет собой угрозу безопасности (на мой взгляд), я бы не предлагал этого делать, поэтому мой ответ: вы не можете там ничего проверить.

Проверка расширений файлов, например, предложенных Алексом, может быть вариантом, но расширение файла не гарантирует, что это изображение. Однако в качестве простой предварительной проверки (а не проверки) это может быть полезно.

Как мы можем проверить, что пользователь выбрал файл изображения?

• По проверке расширения файла
  Все работает как положено, текстовый файл с расширением .png проходит здесь
• input[type=file][accept=image/*] Первоначально скрывает non-image файлы от пользователя. Но этот фильтр работает и по расширениям. И пользователь по-прежнему может вручную ввести любое существующее имя файла.

• Мы можем проверить mime-тип результата dataUrl, он начинается с data:mimetype;base64,.... Итак, нам нужен image/* mimetype.

  var file = $('#uploadfile');
  file.on('change', function (e) {
      var reader = new FileReader();
  
      reader.onload = function() {
          var data = reader.result;
          if (data.match(/^data:image\//)) {
              $('#thumbnail').attr('src', data);
          } else {
              console.error('Not an image');
          }
      };
  
      reader.readAsDataURL(file.prop('files')[0]);
  });
  

Вы можете попробовать вот так

// Image upload validation
$(document).on('change', ':file',function () {
    const file = this.files[0];
    const fileType = file['type'];
    const validImageTypes = ['image/jpeg', 'image/png'];
    if (!validImageTypes.includes(fileType)) {
        alert('Only JPEG and PNG file types are allowed');
        this.value = '';
    }
});