Как проверить размер ввода файла с помощью jQuery?

Ответ 1

У вас фактически нет доступа к файловой системе (например, чтение и запись локальных файлов), однако из-за спецификации HTML5 File Api есть некоторые свойства файлов, к которым у вас есть доступ, и размер файла является одним из их.

Для HTML ниже

<input type="file" id="myFile" />

попробуйте следующее:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

Поскольку он является частью спецификации HTML5, он будет работать только для современных браузеров (v10 требуется для IE), и я добавил здесь подробнее подробности и ссылки на другую информацию о файле, которую вы должны знать: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

Поддержка старых браузеров

Имейте в виду, что старые браузеры вернут значение null для предыдущего вызова this.files, поэтому доступ к this.files[0] приведет к возникновению исключения, и вы должны проверить поддержку Файлового API перед его использованием

Ответ 2

Если вы хотите использовать jQuery validate, вы можете создать этот метод:

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (en bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

Вы бы использовали его:

$('#formid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576  }},
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});

Ответ 3

Этот код:

$("#yourFileInput")[0].files[0].size;

Возвращает размер файла для ввода формы.

В FF 3.6 и более поздних версиях этот код должен быть:

$("#yourFileInput")[0].files[0].fileSize;

Ответ 4

Я также отправляю свое решение, используемое для элемента управления ASP.NET FileUpload. Возможно, кто-то найдет это полезным.

    $(function () {        
    $('<%= fileUploadCV.ClientID %>').change(function () {

        //because this is single file upload I use only first index
        var f = this.files[0]

        //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
        if (f.size > 8388608 || f.fileSize > 8388608)
        {
           //show an alert to the user
           alert("Allowed file size exceeded. (Max. 8 MB)")

           //reset file upload control
           this.value = null;
        }
    })
});

Ответ 5

Используйте ниже, чтобы проверить размер файла и очистить, если он больше,

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

Ответ 6

Вы можете выполнить этот тип проверки с помощью Flash или Silverlight, но не с Javascript. Песочница javascript не позволяет получить доступ к файловой системе. После того, как она будет загружена, необходимо проверить размер.

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

Ответ 7

<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
    function checkSize(){
        var size = $('#uploadForm')["0"].firstChild.files["0"].size;
        console.log(size);
    }
</script>

Я нашел это самым легким, если вы не планируете подавать форму через стандартные методы ajax/html5, но, конечно, это работает с чем угодно.

ПРИМЕЧАНИЯ:

var size = $('#uploadForm')["0"]["0"].files["0"].size;

Это работало, но оно больше не в хром, я просто проверил код выше, и он работал как в ff, так и в хроме (последний). Второй [ "0" ] теперь является первым.

Ответ 8

Пожалуйста, попробуйте это:

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}

Ответ 9

<form>
   <input id="file" name="filename" type="file" />
</form>

$(function(){
    $('#file').change(function(){
        var file=this.files[0]
        alert(file.size||file.fileSize)
    })
})