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

135

У меня есть форма с возможностью выгрузки файлов, и я хотел бы иметь возможность получать хорошие отчеты об ошибках на стороне клиента, если файл, который пользователь пытается выгрузить, слишком большой, есть ли способ проверить размер файла с помощью jQuery, либо чисто на клиенте или как-нибудь выложить файл обратно на сервер для проверки?

Джимми
источник

Ответы:

275

На самом деле у вас нет доступа к файловой системе (например, для чтения и записи локальных файлов), однако, из-за спецификации 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 проверка-The-размер файла /


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

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

Фелипе Сабино
источник
6
Все говорят, что это невозможно, но вот оно. Это работает. Я проверял это.
Питер
35
@Jeroen Я согласен с тем, что отказ от работы в IE делает его не идеальным решением для многих людей, но разве он не понижает голос и говорит, что ответ слишком бесполезен? Я использовал это решение в самых разнообразных корпоративных веб-решениях, для которых требовалось работать только в Chrome и / или Firefox, и некоторые люди, которые ищут это решение, могут оказаться в одном месте, поэтому это решение будет достаточно хорошим. ,
Фелипе Сабино
3
Я только что натолкнулся на этот ответ в Google и собираюсь использовать его, чтобы запретить пользователям публиковать файлы, размер которых превышает заданный размер; так как я также проверяю размеры файлов на стороне сервера, я счастлив иметь решение на стороне клиента, которое не работает в IE8.
Стив Уилкс
2
@GaolaiPeng Эта ошибка, вероятно, из-за того, что jQueryфайл javascript не был добавлен (или был загружен неправильно). У вас есть это на headвашей странице?
Фелипе Сабино
1
@volumeone Вот почему я сказал, что вы должны «проверить поддержку File API перед его использованием» в моем ответе, и тогда вы можете соответствующим образом изменить пользовательский интерфейс.
Фелипе Сабино
41

Если вы хотите использовать 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" }
});
Наойз Голден
источник
1
@ Да, свойство размера файла является частью спецификации HTML5, поэтому оно будет работать только для современных браузеров (для IE это будет версия 10+)
Фелипе Сабино
7
Вы неправильно использовали acceptправило, где вы должны были использовать extensionправило. ~ Правило только для типов MIME. Правило для расширений файлов. Кроме того, необходимо включить в файл для этих правил. acceptextensionadditional-methods.js
Sparky
Дополняет напористый комментарий @ Sparky: $('#formid').validate({ rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } });
victorf
26

Этот код:

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

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

На FF 3.6 и позже этот код должен быть:

$("#yourFileInput")[0].files[0].fileSize;
jeferod83
источник
2
Ваш первый код работает в Chrome, но второй не работает в FireFox последней версии.
Дебора
Этот второй код - то, что мне пришлось использовать для всех современных браузеров (2014+).
Dreamcasting
1
Первый код работает IE 10, 11, Edge, Chrome, Safari (версия для Windows), Brave и Firefox.
Машукур Рахман
12

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

    $(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;
        }
    })
});
Бесник Кастрати
источник
1
Вам необходимо проверить значение null, f = this.files[0]иначе это не удастся в старых браузерах. напр.if (f && (f.size > 8388608 || f.fileSize > 8388608))
пропал
9

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

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });
Умеш Патил
источник
1
Следует использовать $ (this) .val (null); В противном случае форма, похоже, не будет отправлена ​​правильно, без выбора правильного вложения.
Кевин Грабхер
1

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

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

Kelsey
источник
1
<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;

Раньше это работало, но больше не работает в Chrome, я просто протестировал приведенный выше код, и он работал как в ff, так и в chrome (последний). Второй ["0"] теперь firstChild.

Диллон Бернетт
источник
0

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

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;
}
Баблу Ахмед
источник