Як перевірити розмір вхідного файлу за допомогою jQuery?

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

Ви фактично не маєте доступу до файлової системи (наприклад, для читання та запису локальних файлів), однак, завдяки специфікації 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-check-the-file-size /

Підтримка старих браузерів

Майте на увазі, що старі веб-переглядачі повернуть nullзначення попереднього this.filesдзвінка, тому доступ до нього this.files[0]призведе до винятку, і перед його використанням слід перевірити підтримку файлового API.

Якщо ви хочете використовувати jQuery's 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" }
});

Цей код:

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

Повертає розмір файлу для введення форми.

У FF 3.6 і пізніших версіях цього коду має бути:

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

Я також розміщую своє рішення, яке використовується для 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;
        }
    })
});

Використовуйте нижче, щоб перевірити розмір файлу та зрозуміти, чи він більший,

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

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

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

<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, так і в chrome (останній). Другий ["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;
}