Klient Sprawdza rozmiar pliku za pomocą HTML5?


84

Próbuję jeździć na fali HTML5, ale mam mały problem. Przed HTML5 sprawdzaliśmy rozmiar pliku za pomocą Flasha, ale teraz trend polega na unikaniu używania Flasha w aplikacjach internetowych. Czy istnieje sposób, aby sprawdzić rozmiar pliku po stronie klienta za pomocą HTML5?

Odpowiedzi:


126

To działa. Umieść go wewnątrz nasłuchiwania zdarzeń na wypadek zmiany danych wejściowych.

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}

U mnie działa w IE 10, Mozilla FFx i Chrome. Dzięki!
Rahnzo,

działa dobrze, po prostu nie używasz go poprawnie; Zaloguj się na zdarzenie zmiany wejścia i wszystko będzie dobrze.
dandavis

@dandavis Używam kodu w odpowiedzi. Jeśli kod działa poprawnie, dlaczego muszę go zmieniać?
Chuck Le Butt,

1
@Chuck Twój przykład nie działa, ponieważ próbujesz odczytać listę plików podczas ładowania strony, przed wybraniem jakiegokolwiek pliku.
ok.

1
@Chuck: ok, działa dobrze i wkleiłeś go ok, ale samo to nie wystarczy. jeśli uruchomisz go w konsoli po zapełnieniu pliku, zobaczysz, że działa poprawnie. w przypadku aplikacji konsola nie jest dobra, dlatego należy umieścić kod w zdarzeniu uruchamianym po wypełnieniu danych wejściowych, aby działał zgodnie z oczekiwaniami. przepraszam za nieporozumienie.
dandavis

33

Zaakceptowana odpowiedź jest w rzeczywistości poprawna, ale musisz powiązać ją z detektorem zdarzeń, aby aktualizował się po każdej zmianie wejścia pliku.

document.getElementById('fileInput').onchange = function(){
    var filesize = document.getElementById('fileInput').files[0].size;
    console.log(filesize);    
}

Jeśli korzystasz z biblioteki jQuery, poniższy kod może się przydać

$('#fileInput').on('change',function(){
  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;
    console.log(fileSize);
  }
});

Biorąc pod uwagę, że konwersja rozmiaru pliku do wyświetlenia, w którym kiedykolwiek metryka, zależy od Ciebie.


Twój przykład jQuery nie działa. Wydaje się, że nie możesz używać jQuery z .files: jsfiddle.net/edxvo4wa (sam to odkryłem, kiedy wymyślałem rozwiązanie - działa, jeśli zmienisz je na document.getElementById).
Chuck Le Butt,

1
@Chuck przepraszam za błąd, zaktualizowałem moją odpowiedź działającą
Ammadu


3

Osobiście wybrałbym ten format:

    $('#inputFile').bind('change', function(e) {
      var data = e.originalEvent.target.files[0];
      // and then ...
      console.log(data.size + "is my file's size");
      // or something more useful ...
      if(data.size < 500000) {
        // what your < 500kb file will do
      }
    }

1
Wydaje mi się, że 500 KB to w rzeczywistości 500 * 1024. Nic wielkiego, ale użytkownik końcowy z plikiem o rozmiarze 500 000 KB zobaczyłby go jako 488 KB i odmówił. I tu zaczyna się wielka frustracja
Apolo

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.