Bagaimana cara memeriksa ukuran input file dengan jQuery?

Saya memiliki formulir dengan kemampuan unggah file dan saya ingin dapat melaporkan kesalahan sisi klien yang bagus jika file yang coba diunggah pengguna terlalu besar, apakah ada cara untuk memeriksa ukuran file dengan jQuery, baik murni pada klien atau entah bagaimana memposting file kembali ke server untuk memeriksa?

Anda sebenarnya tidak memiliki akses ke sistem file (misalnya membaca dan menulis file lokal), namun, karena spesifikasi File HTML5 Api, ada beberapa properti file yang Anda memiliki akses, dan ukuran file adalah salah satunya.

Untuk HTML di bawah ini

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

coba yang berikut ini:

//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);

});

Karena ini adalah bagian dari spesifikasi HTML5, itu hanya akan berfungsi untuk browser modern (v10 diperlukan untuk IE) dan saya menambahkan di sini lebih detail dan tautan tentang informasi file lain yang harus Anda ketahui: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-checking-the-file-size /

Dukungan browser lama

Ketahuilah bahwa browser lama akan mengembalikan nullnilai untuk this.filespanggilan sebelumnya , jadi mengakses this.files[0]akan menimbulkan pengecualian dan Anda harus memeriksa dukungan File API sebelum menggunakannya

Jika Anda ingin menggunakan jQuery, validateAnda bisa dengan membuat metode ini:

$.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) 
});

Anda akan menggunakannya:

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

Kode ini:

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

Mengembalikan ukuran file untuk input formulir.

Pada FF 3.6 dan yang lebih baru, kode ini harus:

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

Saya memposting solusi saya juga, digunakan untuk FileUploadkontrol ASP.NET . Mungkin seseorang akan merasakan manfaatnya.

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

Gunakan di bawah untuk memeriksa ukuran file dan hapus jika lebih besar,

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

Anda dapat melakukan pemeriksaan jenis ini dengan Flash atau Silverlight tetapi tidak dengan Javascript. Kotak pasir javascript tidak memungkinkan akses ke sistem file. Pemeriksaan ukuran perlu dilakukan di sisi server setelah diunggah.

Jika Anda ingin pergi rute Silverlight / Flash, Anda dapat memeriksa bahwa jika mereka tidak diinstal secara default ke penangan upload file biasa yang menggunakan kontrol normal. Dengan cara ini, jika Silverlight / Flash diinstal, pengalaman mereka akan sedikit lebih kaya.

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

Saya menemukan ini sebagai yang termudah jika Anda tidak berencana mengirimkan formulir melalui metode ajax / html5 standar, tapi tentu saja itu berfungsi dengan apa pun.

CATATAN:

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

Ini digunakan untuk bekerja, tetapi tidak di chrome lagi, saya baru saja menguji kode di atas dan itu berfungsi baik di ff dan chrome (terbaru). ["0"] yang kedua sekarang adalah anak pertama.

Silakan coba ini:

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