Как заставить jQuery ограничивать типы файлов при загрузке?

Question

Я бы хотел, чтобы jQuery ограничивал поле загрузки файла только jpg / jpeg, png и gif. Я делаю проверку бэкэнда уже с PHP. Я запускаю кнопку отправки через функцию JavaScript, поэтому мне просто нужно знать, как проверять типы файлов перед отправкой или предупреждением.

Answer 1

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

Чтобы поверхностно проверить, имеет ли файл правильное расширение, вы можете сделать что-то вроде этого:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

Answer 2

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

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

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

Answer 3

Вы можете использовать плагин проверки для jQuery: http://docs.jquery.com/Plugins/Validation

Бывает, что есть правило accept (), которое делает именно то, что вам нужно: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Обратите внимание, что управление расширением файла не является пуленепробиваемым, поскольку оно никоим образом не связано с mimetype файла. Таким образом, вы могли бы иметь .png, который представляет собой документ Word, и .doc, который является совершенно правильным изображением PNG. Так что не забудьте сделать больше элементов управления на стороне сервера;)

Answer 4

Для внешнего интерфейса довольно удобно поставить атрибут ' accept ', если вы используете поле файла.

Пример:

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

Пара важных замечаний:

• Атрибут accept поддерживается в Internet Explorer 10, Firefox, Opera, Chrome и Safari 6.
• В диалоговом окне браузера файлов будет отображаться текст для расширения файла в разных браузерах.

Answer 5

Не хотите проверять скорее на MIME, чем на том расширении, которое лжет пользователь? Если так, то это менее одной строки:

<input type="file" id="userfile" accept="image/*|video/*" required />

Answer 6

для моего случая я использовал следующие коды:

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }

Answer 7

Я пытаюсь написать пример рабочего кода, я тестирую его, и все работает.

Заяц - это код:

HTML:

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

Javascript:

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}

Answer 8

Этот пример позволяет загружать только изображения PNG.

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });

Answer 9

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

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});

Answer 10

Вот простой код для проверки JavaScript, и после проверки он очистит входной файл.

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}