Jak sprawdzić rozmiar pliku wejściowego za pomocą jQuery?

Mam formularz z możliwością przesyłania plików i chciałbym mieć możliwość raportowania błędów po stronie klienta, jeśli plik, który użytkownik próbuje załadować, jest zbyt duży, czy istnieje sposób na sprawdzenie rozmiaru pliku za pomocą jQuery, albo czysto na kliencie lub w jakiś sposób wysyłając plik z powrotem na serwer w celu sprawdzenia?

W rzeczywistości nie masz dostępu do systemu plików (na przykład odczytu i zapisu plików lokalnych), jednak ze względu na specyfikację HTML5 File Api istnieją pewne właściwości pliku, do których masz dostęp, a rozmiar pliku jest jednym z nich.

W przypadku poniższego kodu HTML

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

spróbuj następujących rzeczy:

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

});

Ponieważ jest to część specyfikacji HTML5, będzie działać tylko dla nowoczesnych przeglądarek (wersja 10 wymagana dla IE) i dodałem tutaj więcej szczegółów i linków do innych informacji o plikach, które powinieneś znać: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-testing-the-file-size /

Obsługa starszych przeglądarek

Należy pamiętać, że stare przeglądarki zwracają nullwartość dla poprzedniego this.fileswywołania, więc dostęp this.files[0]spowoduje wyjątek i przed użyciem należy sprawdzić obsługę interfejsu File API

Jeśli chcesz używać jQuery, validatemożesz stworzyć tę metodę:

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

Użyłbyś tego:

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

Ten kod:

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

Zwraca rozmiar pliku dla danych wejściowych formularza.

Na FF 3.6 i nowszych ten kod powinien wyglądać następująco:

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

Publikuję też moje rozwiązanie, używane do FileUploadformantu ASP.NET . Może ktoś uzna to za przydatne.

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

Użyj poniżej, aby sprawdzić rozmiar pliku i wyczyść, jeśli jest większy,

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

Tego typu sprawdzanie można przeprowadzić za pomocą Flasha lub Silverlighta, ale nie Javascript. Piaskownica javascript nie zezwala na dostęp do systemu plików. Sprawdzenie rozmiaru musiałoby być wykonane po stronie serwera po przesłaniu.

Jeśli chcesz skorzystać z trasy Silverlight / Flash, możesz sprawdzić, czy nie są one domyślnie zainstalowane, to zwykły program obsługi przesyłania plików, który używa normalnych kontrolek. W ten sposób, jeśli mają zainstalowany Silverlight / Flash, ich wrażenia będą nieco bogatsze.

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

Wydaje mi się, że jest to najłatwiejsze, jeśli nie planujesz przesłania formularza za pomocą standardowych metod ajax / html5, ale oczywiście działa ze wszystkim.

UWAGI:

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

Kiedyś działało, ale już nie działa w chrome, właśnie przetestowałem powyższy kod i działał zarówno w FF, jak i Chrome (ostatni). Drugie [„0”] jest teraz pierwszym dzieckiem.

Spróbuj tego:

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