Проверка размера загружаемого файла JavaScript

Есть ли способ проверить размер файла перед его загрузкой с помощью JavaScript?


Да , вы можете использовать для этого File API.

Вот полный пример (см. комментарии):

  document.getElementById ("btnLoad"). addEventListener ("click", function showFileSize () {//(Невозможно использовать `typeof FileReader ===" function "`  потому что, очевидно,//он возвращается как "объект" в некоторых браузерах. Так что просто посмотрите, есть ли он вообще//.) if (! window.FileReader) {//Это ОЧЕНЬ маловероятно, поддержка браузером почти универсальная консоль.  log ("Файловый API пока не поддерживается в этом браузере."); return;} var input = document.getElementById ('fileinput'); if (! input.files) {//Это ОЧЕНЬ маловероятно, поддержка браузера  является почти универсальным console.error ("Этот браузер, похоже, не поддерживает свойство файловых входов` files`. ");} else if (! input.files [0]) {addPara (" Пожалуйста, выберите файл перед  нажав "Загрузить" ");} else {var file = input.f  iles [0];  addPara ("Файл" + имя_файла + "равно" + размер файла + "размер в байтах");  }}); функция addPara (текст) {var p = document.createElement ("p");  p.textContent = текст;  document.body.appendChild (p);}  
  body {font-family: sans-serif;}  
       


Немного не по теме, но: Обратите внимание, что проверка на стороне клиента выполняется не заменяет проверку на стороне сервера. Проверка на стороне клиента предназначена исключительно для того, чтобы сделать возможным более приятный пользовательский интерфейс. Например, если вы не разрешаете загружать файл размером более 5 МБ, вы можете использовать проверку на стороне клиента, чтобы убедиться, что размер файла, выбранного пользователем, не превышает 5 МБ, и дать им приятное дружеское сообщение, если он (поэтому они не тратят все это время на загрузку только для того, чтобы получить результат, выброшенный на сервер), но вы должны также обеспечить соблюдение этого ограничения на сервере, поскольку все ограничения на стороне клиента ( и другие проверки) можно обойти.


Использование jquery:

   Загрузить изображение:     $ ('# image-file'). bind ('change', function () {alert ('Этот размер файла  это: '+ this.files [0]. размер/1024/1024 + "MiB");  });   

3


Работает для динамических и статических файловых элементов

Только решение для Javascript

  function ValidateSize (file) {var FileSize = file.files [0] .size/1024/1024  ; //в MiB if (FileSize> 2) {alert ('Размер файла превышает 2 MiB'); //$ (файл) .val (''); //для очистки с помощью Jquery} else {}}  
    

5


Это довольно просто.

  var oFile = document.getElementById ("fileUpload"). files [0]; // if (oFile.size> 2097152)//2 МиБ для байтов.  {предупреждение ("Размер файла не должен превышать 2 МБ!");  вернуть;  }  

1


Нет Да, с использованием File API в новых браузерах. Подробности см. В ответе TJ.

Если вам также нужна поддержка старых браузеров, для этого вам нужно будет использовать программу загрузки на основе Flash, например SWFUpload или Uploadify.

Демонстрация возможностей SWFUpload показывает, как работает параметр file_size_limit .

Обратите внимание, что для этого (очевидно) требуется Flash, плюс способ его работы немного отличается от обычных форм загрузки.

0


Если вы используете jQuery Validation, вы можете написать что-то вроде этого:

  $. validator.addMethod ("maxfilesize", function (value, element) {if (this.optional (element) |  |! element.files ||! element.files [0]) {return true;} else {return element.files [0] .size  

0


Я сделал что-то вроде этого:

  $ ('#  файл изображения '). on (' изменить ', function () {var numb = $ (this) [0] .files [0] .size/1024/1024; numb = numb.toFixed (2); if (numb  > 2) {alert ('большой, максимум 2 МБ.  Размер вашего файла: '+ numb +' MiB ');} else {alert (' Все в порядке, в вашем файле есть '+ numb +' MiB ')}});  
      

1


Я использую одну основную функцию Javascript, которую нашел на сайте Mozilla Developer Network https:// developer.mozilla.org/en-US/docs/Using_files_from_web_applications, а также другая функция с AJAX, измененная в соответствии с моими потребностями. Она получает идентификатор элемента документа, указывающий на то место в моем html-коде, где я хочу записать размер файла.

   function updateSize (elementId) {var nBytes = 0, oFiles = document.getElementById (elementId) .files, nFiles = oFiles.length; for (var nFileId = 0  ; nFileId  1;  nApprox/= 1024, nMultiple ++) {sOutput = "(" + nApprox.toFixed (3) + aMultiples [nMultiple] + ")";  } return sOutput;}      document.getElementById ('spanFileSizeText'). innerHTML = updateSize ("inputFileUpload");   

Приветствия


Пример JQuery, представленный в этой ветке, сильно устарел, и Google вообще не помог, так что вот моя версия:

   $ ('# image-file'). on ('change  ', function () {console.log ($ (this) [0] .files [0] .name +' размер файла: '+ $ (this) [0] .files [0] .size/1024/1024 +  'Mb');});   


Хотя вопрос в ответил, я хотел опубликовать свой ответ. Может пригодиться будущим зрителям. Вы можете использовать его, как в следующем коде.

    function readSingleFile (evt) {//Получение первого (и единственного!) файла из объекта FileList var f = evt.target.files [0];  если (е) {var r = new FileReader ();  r.onload = функция (е) {содержимое переменной = e.target.result;  alert ("Получил файл. n" + "name:" + f.name + "n" + "type:" + f.type + "n" + "size:" + f.size + "bytesn" + "  начинается с: "+ contents.substr (1, contents. indexOf ("п")));  if (f.size> 5242880) {alert ('Размер файла больше 5 МБ!');  }} r.readAsText (f);  } else {alert ("Не удалось загрузить файл");  }}  


Вы можете попробовать этот Fineuploader

Он отлично работает в IE6 (и выше), Chrome или Firefox

1


Я столкнулся с этим вопросом, и единственная нужная мне строчка кода скрывалась в больших блоках кода.

Краткий ответ: this.files[0 visible.size

Кстати, JQuery не нужен.


Если вы установите для параметра ‘Document Mode’ значение ‘Standards’, вы можете использовать простой javascript ‘size’, чтобы получить размер загруженного файла.

Установите Ie ‘Document Mode’ в ‘Standards’:

    

Затем используйте метод javascript ‘size’, чтобы получить размер загруженного файла:

   var uploadedFile = document.  getElementById ('imageUpload');  var fileSize = uploadedFile.files [0] .size;  предупреждение (размер файла);   

У меня работает.

1



/file-size

Модуль размера файла для узла. js для преобразования, управления и обработки размеров файлов.

Возможности

  • Нулевые зависимости.
  • Поддерживает IEC (power 1024 , по умолчанию ), SI (power 1000 ) и JEDEC (Альтернативная нотация единиц СИ).
  • Преобразование из байтов в K , M , G и так далее …
  • Настраиваемый вывод, понятный человеку.

Установка

 $ npm install file-size 

Теперь потребуйте его в своих файлах следующим образом:

 var sizes = require (  'размер файла'); 

Использование

 Размер файла (число байтов, параметры объекта) 

Использовать размер файла очень просто, Намного проще, если вы знаете таблицу спецификаций. Однако знать его необязательно, и в большинстве случаев он вам не понадобится.

Инициализация

Размер файла работает в цепочке jQuery, поэтому вы можете без проблем использовать несколько экземпляров.

 var size =px (186457865); 

Параметры

 var size = Размер файла (186457865, {fixed: 2, spacer: ''}); 

  • фиксированный — количество отображаемых позиций после десятичной дроби, по умолчанию 2
  • spacer — пробел между число и единица измерения, по умолчанию — пробел

size.human (String spec) -> String

Создает удобочитаемый размер файла.

  • spec может принимать одно из следующих значений:
    • si
    • iec
    • jedec
Спецификация IEC

По умолчанию

Степень 1024

//выводит: 177,82 MiBfilesize (186457865) .human (); 

SI Спецификация

Мощность 1000

//выводит: 186,46 MBfilesize (186457865) .human ('si  '); 

Спецификация JEDEC

Изменяет обозначение единиц измерения по умолчанию IEC iB на B для следующего: KB , MB , GB

Остальные находятся в нотации iB в соответствии со спецификацией JEDEC.

//выводит: 186,46 MBfilesize (186457865) .human ('jedec'); 

size.to (String unit , String spec) -> String

Преобразует байты в другой размер файла unit

  • unit размера может быть одним из следующих:
    • B , КБ , МБ , ГБ , TB , PB , EB , ZB , YB
  • spec может быть одним из следующих:
    • si
    • iec
    • jedec
Спецификация IEC

По умолчанию

//выводит: 177.82filesize (186457865) .to ('MB'); 

Спецификация SI
//выводит: 186.46filesize (186457865) .to ('MB', 'si'); 

size.calculate (String spec) -> Object

Вычисляет суффикс, величину, фиксированное, нефиксированное, биты (фиксированное, нефиксированное) из указанного байтов по указанной spec .

  • spec может быть одним из следующих:
    • si
    • iec
    • jedec
/* * выводит: * * {* суффикс: 'Байты', * величина: 0,  * результат: 8, * фиксированный: '8.00', * биты: {результат: 1, фиксированный: '1.00'} *} */var result = Размер файла (8) .calculate () 

Оцените статью
clickpad.ru
Добавить комментарий