JQuery ile dosya giriş boyutu nasıl kontrol edilir?

Dosya yükleme özelliklerine sahip bir formum var ve kullanıcının yüklemeye çalıştığı dosya çok büyükse, jQuery ile dosya boyutuna karşı kontrol etmek için bir yol var mı, bazı güzel istemci tarafı hata raporlaması yapmak istiyorum istemcide veya bir şekilde dosyayı kontrol etmek için sunucuya geri gönderme?

Aslında dosya sistemine erişiminiz yoktur (örneğin, yerel dosyaları okuma ve yazma), ancak HTML5 Dosya Api belirtimi nedeniyle, erişiminiz olan bazı dosya özellikleri vardır ve dosya boyutu bunlardan biridir.

Aşağıdaki HTML için

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

takip etmeyi dene:

//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 spesifikasyonunun bir parçası olduğundan, sadece modern tarayıcılar için çalışacaktır (IE için v10 gerekir) ve buraya bilmeniz gereken diğer dosya bilgileri hakkında daha fazla ayrıntı ve bağlantı ekledim : http://felipe.sabino.me/javascript / 2012/01/30 / javascipt denetimi-dosya boyutu /

Eski tarayıcılar desteği

Eski tarayıcıların nullönceki this.filesarama için bir değer döndüreceğini unutmayın , bu nedenle erişim this.files[0]bir istisna doğuracaktır ve kullanmadan önce Dosya API'sı desteğini kontrol etmelisiniz

JQuery's kullanmak validateistiyorsanız bu yöntemi oluşturarak yapabilirsiniz:

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

Kullanırsınız:

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

Bu kod:

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

Form girişi için dosya boyutunu döndürür.

FF 3.6 ve sonrasında bu kod şöyle olmalıdır:

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

Çözümümü de gönderiyorum, ASP.NET FileUploaddenetimi için kullanıyorum. Belki birisi bunu yararlı bulacaktır.

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

Dosyanın boyutunu kontrol etmek ve daha büyük olup olmadığını temizlemek için aşağıdakini kullanın,

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

Bu tür denetimleri Flash veya Silverlight ile yapabilirsiniz, ancak Javascript ile yapamazsınız. Javascript korumalı alanı dosya sistemine erişime izin vermiyor. Boyut kontrolünün, yüklendikten sonra sunucu tarafında yapılması gerekir.

Silverlight / Flash yoluna gitmek istiyorsanız, varsayılan olarak yüklenmediklerinde normal denetimleri kullanan normal bir dosya yükleme işleyicisine kontrol edebilirsiniz. Bu şekilde, eğer Silverlight / Flash kurulu ise deneyimleri biraz daha zengin olacaktır.

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

Formu standart ajax / html5 yöntemleri ile göndermeyi planlamıyorsanız en kolayı buldum, ancak elbette herhangi bir şeyle çalışıyor.

NOTLAR:

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

Bu işe yaradı, ama artık krom yok, ben sadece yukarıdaki kodu test ve hem ff hem de krom (en son) çalıştı. İkinci ["0"] şimdi ilkÇocuk.

Plese bunu deneyin:

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