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


133

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

Ответы:


280

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

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

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

18
И $("#my_upload_form").bind("submit", function() { // above check });
свяжите

7
Вы могли бы использовать$('#file_field').change(function(){// above check});
makki

3
$("#my_upload_form").bind("submit", function() { // above check });теперь должен быть привязан с помощью $("#my_upload_form").submit(function() { // above check }); api.jquery.com/submit . Вы также можете запретить отправку формы, используя$("#my_upload_form").submit(function(e) { // above check e.preventDefault(); });
Liam

1
В этом случае, если пользователь добавит, ".jpg" например, файл MS Word, FileUpload примет этот файл как изображение. Я думаю, что это не правильно.
Джейхун

3
Стоит отметить, что это не надежный метод. В конце дня убедитесь, что ваш бэкэнд проверяет первые несколько байтов файла, чтобы убедиться, что это именно тот тип файла, который вам действительно нужен. Еще одна вещь, о которой стоит подумать: в linux и osx вы можете иметь файл без расширения, которое на самом деле того типа, который вам нужен ... так что это тоже может не сработать
chris

39

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

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

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


6
извини, братан, но это плохое регулярное выражение. файлы могут иметь точки в своем имени. "giel.asd.aaaaa.jpg.png" .match (/\.(.+)$/)
Тим Кречмер,

27

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

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

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


Можете
ли

25

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

Пример:

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

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


1
Намного лучше, чем использовать JQuery
Кристофер Григг

19

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

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

не получает то, что ему нужно. это просто для облегчения выбора изображения из папки с другим расширением. как вы можете видеть здесь -> imageshack.us/a/img20/8451/switchzz.jpg
Бернте

Поскольку это не повредит IE <10 и не повредит другому коду, это эффективное ограничение того, что вы пытаетесь ограничить.
Лев

4

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

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

3

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

Заяц это код:

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
    }
}

1

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

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

1

Этот пример позволяет загружать только изображения 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;
                    }
                });

Подскажите, пожалуйста, как ограничить размер изображения. Например, изображение размером 10
МБ

@PDSSandeep Проверьте эту ссылку pls stackoverflow.com/questions/6575159/…
Разработчик

0
<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>

При этом нельзя проверить тип и размер файла, протестировано в FF.
Каммар Фероз

0

Если вы имеете дело с несколькими (html 5) загрузками файлов, я взял верхний предложенный комментарий и немного его изменил:

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

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

        }
    }

0
    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';

-1
function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }

-1

Вот простой код для проверки 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("");
    }
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.