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


135

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?

Odpowiedzi:


275

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


6
Wszyscy mówią, że nie da się tego zrobić - ale oto jest. To działa. Przetestowałem to.
Peter

35
@Jeroen Zgadzam się, że brak pracy dla IE sprawia, że ​​nie jest to idealne rozwiązanie dla wielu ludzi, ale czy nie poddaje się głosowi przeciw i nie mówi, że odpowiedź jest zbyt bezużyteczna? Korzystałem z tego rozwiązania w wielu różnych korporacyjnych rozwiązaniach internetowych, które w zakresie wymagały pracy tylko w chrome i / lub firefox, a niektórzy szukający tego rozwiązania mogą znajdować się w tym samym miejscu, więc to rozwiązanie będzie wystarczająco dobre .
Felipe Sabino

3
Właśnie natknąłem się na tę odpowiedź w Google i zamierzam jej użyć, aby uniemożliwić użytkownikom wysyłanie plików, które mają większy rozmiar; ponieważ sprawdzam również rozmiary plików po stronie serwera, cieszę się, że mam rozwiązanie po stronie klienta, które nie działa w IE8.
Steve Wilkes

2
@GaolaiPeng Ten błąd jest prawdopodobnie spowodowany tym, że jQueryplik javascript nie został dodany (lub nie został poprawnie załadowany). Czy masz to dodane na headswojej stronie?
Felipe Sabino

1
@volumeone Dlatego powiedziałem, że w mojej odpowiedzi należy „sprawdzić obsługę File API”, a następnie odpowiednio zmienić interfejs użytkownika.
Felipe Sabino

41

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

1
@Dan tak, właściwość rozmiaru pliku jest częścią specyfikacji HTML5, więc będzie działać tylko dla nowoczesnych przeglądarek (dla IE byłaby to wersja 10+)
Felipe Sabino

7
Nieprawidłowo użyłeś acceptreguły, w której powinieneś był użyć extensionreguły. ~ Zasada jest tylko dla typów MIME. Reguła jest dla rozszerzeń plików. Trzeba także zawierać ten plik na tych zasadach. acceptextensionadditional-methods.js
Sparky

Uzupełnienie stanowczego komentarza @ $('#formid').validate({ rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } });
Sparky'ego

26

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;

2
Twój pierwszy kod działa w Chrome, ale drugi nie działa w najnowszej wersji FireFox.
Débora,

Ten drugi kod jest tym, czego musiałem użyć we wszystkich nowoczesnych przeglądarkach (2014+).
Dreamcasting

1
Pierwszy kod działa w IE 10, 11, Edge, Chrome, Safari (wersja Windows), Brave i Firefox.
Mashukur Rahman

12

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

1
Musisz sprawdzić wartość null f = this.files[0]lub to się nie powiedzie w starszych przeglądarkach. np.if (f && (f.size > 8388608 || f.fileSize > 8388608))
Gone Coding

9

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

1
Powinien używać $ (this) .val (null); W przeciwnym razie formularz nie wydaje się już poprawnie składać bez wybrania odpowiedniego załącznika.
Kevin Grabher

1

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.


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


0

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;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.