Клиент Проверяет размер файла с помощью HTML5?

Question 1

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

Question 2

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

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

Question 3

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

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 для отображения в какой-либо метрике зависит от вас.

Question 4

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 дает имя и тип.

Question 5

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

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

Question 6

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

Answer 1

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

Answer 2

128

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

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

Абдулла Джибали
источник

У меня это работает в IE 10, Mozilla FFx и Chrome. Благодаря!

Rahnzo

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

dandavis

@dandavis Я использую код в ответе. Если код работает нормально, зачем мне его менять?

Чак Ле Батт

1

@Chuck ваш пример не работает, потому что вы пытаетесь прочитать список файлов при загрузке страницы, прежде чем выбирать какой-либо файл.

aboutiblue

1

@Chuck: Хорошо, он работает нормально, и вы его вставили нормально, но одного этого недостаточно. если вы запустите его в консоли после заполнения файла, вы увидите, что он работает нормально. для приложений консоль не годится, поэтому вы должны поместить код в событие, которое запускается после заполнения ввода, чтобы он работал должным образом. Извините за недопонимание.

dandavis

Answer 3

У меня это работает в IE 10, Mozilla FFx и Chrome. Благодаря!

Rahnzo

Answer 4

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

dandavis

Answer 5

@dandavis Я использую код в ответе. Если код работает нормально, зачем мне его менять?

Чак Ле Батт

Answer 6

1

@Chuck ваш пример не работает, потому что вы пытаетесь прочитать список файлов при загрузке страницы, прежде чем выбирать какой-либо файл.

aboutiblue

Answer 7

1

@Chuck: Хорошо, он работает нормально, и вы его вставили нормально, но одного этого недостаточно. если вы запустите его в консоли после заполнения файла, вы увидите, что он работает нормально. для приложений консоль не годится, поэтому вы должны поместить код в событие, которое запускается после заполнения ввода, чтобы он работал должным образом. Извините за недопонимание.

dandavis

Answer 8

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

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 для отображения в какой-либо метрике зависит от вас.

Answer 9

Ваш пример jQuery не работает. Похоже, вы не можете использовать jQuery с .files: jsfiddle.net/edxvo4wa (я обнаружил это сам, когда придумывал решение - оно работает, если вы измените его на document.getElementById).

Чак Ле Батт

Answer 10

1

@Chuck извините за ошибку, я обновил свой ответ рабочим

Аммаду

Answer 11

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 дает имя и тип.

Answer 12

3

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

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

Я считаю, что 500 КБ на самом деле будет 500 * 1024. Ничего страшного, но конечный пользователь с файлом 500 000 ГБ увидит его как 488 КБ и откажется. И вот тут начинается большое разочарование

Аполо

Answer 13

1

Я считаю, что 500 КБ на самом деле будет 500 * 1024. Ничего страшного, но конечный пользователь с файлом 500 000 ГБ увидит его как 488 КБ и откажется. И вот тут начинается большое разочарование

Аполо

Answer 14

2

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

Жюльен
источник

10

Добавьте также проверку размера сервера, но вы также можете избавить тех, кто использует современные браузеры, от боли и проверить это на стороне клиента.

Эль Йобо

Answer 15

10

Добавьте также проверку размера сервера, но вы также можете избавить тех, кто использует современные браузеры, от боли и проверить это на стороне клиента.

Эль Йобо

Клиент Проверяет размер файла с помощью HTML5?

Ответы: