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

Question

У меня есть следующее:

<input id="user_profile_pic" name="user[profile_pic]" type="file">

На сервере я проверяю, чтобы убедиться, что это изображение, но сначала я хочу проверить на стороне клиента.

Как с jQuery я могу предупредить пользователя, если выбранный файл входного файла не GIF, JPG, PNG или BMP?

Спасибо

Answer 1

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

$("#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;
    }
});

Изменить

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

Answer 2

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

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

Answer 3

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

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!");
}

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

Answer 4

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

// 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 = '';
    }
});

Answer 5

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

• По проверке расширения файла
  Это работает, как ожидается, текстовый файл с расширением .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]);
  });
  

Answer 6

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

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

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