Клиент Проверяет размер файла с помощью HTML5? - PullRequest
79 голосов
/ 06 ноября 2010

Я пытаюсь прокатиться на волне HTML5, но столкнулся с небольшой проблемой. До HTML5 мы проверяли размер файла с помощью flash, но сейчас существует тенденция избегать использования flash в веб-приложениях. Есть ли способ проверить размер файла на стороне клиента с помощью HTML5?

Ответы [ 5 ]

120 голосов
/ 29 ноября 2010

Это работает.Поместите его в прослушиватель событий, когда изменяется вход.

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}
26 голосов
/ 20 июля 2015

Принятый ответ на самом деле правильный, но вам нужно привязать его к прослушивателю событий, чтобы он обновлялся при изменении входного файла.

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

Если вы используете библиотеку jQuery, вам может пригодиться следующий код

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

Учитывая, что преобразование fileSize для отображения в какой-либо метрике зависит только от вас.

7 голосов
/ 31 августа 2012

HTML5 fie api поддерживает проверку размера файла.

прочтите эту статью, чтобы получить больше информации о файле api

http://www.html5rocks.com/en/tutorials/file/dndfiles/

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


var size = document.getElementById("fileInput").files[0].size;

аналогично API файладает имя и тип.

3 голосов
/ 04 октября 2016

Лично я бы выбрал этот формат:

    $('#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
      }
    }
2 голосов
/ 06 ноября 2010

«нет простого кросс-браузерного решения для достижения этой цели»: Определение размера загружаемого файла на стороне клиента?

...