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

Question

Mam formularz z możliwościami przesyłania plików i chciałbym mieć możliwość zgłaszania błędów po stronie klienta, jeśli plik, który użytkownik próbuje przesłać, jest zbyt duży, czy istnieje sposób sprawdzenia rozmiaru pliku za pomocą jQuery, albo wyłącznie na kliencie, albo w jakiś sposób publikuje plik z powrotem na serwer, aby sprawdzić?

Answer 1

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

Dla HTML

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

spróbuj wykonać następujące czynności:

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

}); 

Jak to jest częścią specyfikacji HTML5, to będzie działać tylko dla nowoczesnych przeglądarek (v10 wymaganych dla IE) i Dodałem here więcej szczegółów i linków na temat innych informacji o plikach, które powinieneś wiedzieć: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

Stare przeglądarki obsługują

Należy pamiętać, że stare przeglądarki zwróci wartość null za poprzedni this.files rozmowy, więc dostęp this.files[0] podniesie wyjątek i powinien check for File API support przed użyciem go

Answer 2

Możesz tego typu sprawdzać w Flash lub Silverlight, ale nie w JavaScript. Piaskownica javascript nie zezwala na dostęp do systemu plików. Kontrola rozmiaru musi być wykonana po stronie serwera po przesłaniu.

Aby przejść do trasy Silverlight/Flash, można sprawdzić, czy nie są one zainstalowane domyślnie w zwykłym module do przesyłania plików, który korzysta z normalnych elementów sterujących. W ten sposób, jeśli masz zainstalowane Silverlight/Flash, ich doświadczenie będzie nieco bogatsze.

Answer 3

Jeśli chcesz użyć jQuery validate można tworząc 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) 
}); 

byłoby go używać:

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

Answer 4

ten kod:

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

Zwraca rozmiar pliku dla wejścia formularza.

Na FF 3.6 i późniejsze Kod ten należy:

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

Answer 5

jestem delegowania moje rozwiązanie też wykorzystywana przez FileUpload kontroli ASP.NET. Być 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; 
     } 
    }) 
}); 

Answer 6

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

Znalazłem to być najprostszy, jeśli nie planujecie złożonego formularza przez ajax standardu HTML5/metody, ale oczywiście to działa z niczego.

UWAGI:

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

ten używany do pracy, ale nie w Chrome już, właśnie testowane powyższy kod i to działało w obie FF i Chrome (Ostatnia). Drugi ["0"] jest teraz firstChild.