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

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

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

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

Как с jQuery я могу предупредить пользователя, если выбранный файл входного файла не является gif, jpg, png или bmp?

Спасибо

Ответы

Ответ 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;
    }
});

Edit

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

Ответ 2

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

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

Ответ 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!");
}

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

Ответ 4

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

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

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

Ответ 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]);
});

Ответ 6

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

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