Поиск по этому блогу

воскресенье, 28 августа 2011 г.

Узнать размер файла до загрузки на сервер. Javascript, jQuery

Допустим необходимо ограничить размер загружаемого файла на сервер в обычной веб форме. Это не сложно сделать на стороне сервера php, perl, ruby даже apache имеет инструменты для  решения данной задачи. Но вот незадача - что если нужно предотвратить отправку формы если размер файла слишком велик?(к чертям клиентская валидация которая проведет пользователя по всем обязательным полям и хитрым правилам заполнения, по отправке вернет ему epic fail - из-за какого-то вложения на пол метра больше чем нада).

Раньше считалось что javascript с такой задачей справится не может - у него нет доступа к файловой системе, но на сегодняшний день браузеры предоставляют для поля ввода файла массив files. Его апи нескольго отличается в зависимости от браузера. А IE вообще не предоставляет такого функционала, но имеет альтернативное решение на основе ActiveX.
Следующая функция в комментариях не нуждается - она определяет размер файла и если он больше 50 Мб то выводит предупреждение и очищает поле.
  function validateSize(fileInput) {
    var fileObj, size;
    if ( typeof ActiveXObject == "function" ) { // IE
      fileObj = (new ActiveXObject("Scripting.FileSystemObject")).getFile(fileInput.value);
    }else {
      fileObj = fileInput.files[0];
    }

    size = fileObj.size; // Size returned in bytes.
    if(size > 50 * 1024 * 1024){//50Mb
      alert('To big file for uploading (50Mb - max)');
      //Очищаем поле ввода файла
      fileInput.parentNode.innerHTML = fileInput.parentNode.innerHTML;
    }
  }
  jQuery('#file_attachment').change(function () {
    validateSize(this);
  });
Кроме параметра size можно смело использовать name (имя файла), type (MIME тип).

UPD : Судя по всему фишка с ActiveXObject  не работает при стандартных настройках безопасности на  Win7 из-за ужесточения политики безопасности и по сему требует от пользователя изменения настроек браузера.

10 комментариев:

  1. Неплохо было бы реализовать вычисление размера файла как функцию jquery (в контексте поля), что будет очень удобно и юзабельно:
    $("#input-file").fileSizes();
    #=> {name1: 123123, name2: 1231233, ....]
    который возвратит хеш, где ключем будут имена файлов - а значением - размер

    ОтветитьУдалить
  2. document.getElementById('ImageFile').parentNode.innerHTML = document.getElementById('ImageFile').parentNode.innerHTML;

    int a = int a ???

    ОтветитьУдалить
  3. 2Евгений
    Да, выглядит глупо, но позволяет очистить поле ввода файла. Так как содержимое value поля доступно только для чтения, то выходит эффект нажатия кнопки reset для поля ввода файла.

    ОтветитьУдалить
  4. Что-то в ie не работает
    Ругается на
    new ActiveXObject("Scripting.FileSystemObject");

    ОтветитьУдалить
  5. Вы наверно использовали IP, а не доменное имя для входа на страничку где использовали данный скрипт. IE не даст использовать эту фишку если Вы зашли на страничку по IP, а не по доменному имени - что-то вроде политики безопастности

    ОтветитьУдалить
  6. Добрый день! Подскажите, что указывать в качестве параметра fileInput?

    ОтветитьУдалить
    Ответы
    1. В качестве fileInput нужно указать DOM объект поля ввода файла полученного к примеру через document.getElementById('myFile') или $('#myFile')[0].

      Удалить
  7. Работает нормально только первый раз, если ещё раз попытаться загрузить тот же файл то всё нормально загружает

    ОтветитьУдалить
    Ответы
    1. Может вы поле не очистили или не навесили повторно обработчик события ?
      https://jsfiddle.net/9vnhkm5w/

      Удалить
  8. Best Online Casino Sites 2021 | Lucky Club
    Discover the best online casino sites in 2021. We list all the best casinos, bonuses and games from our list of trusted casinos! Sign up today!‎Best Online Casino Sites · ‎Online 카지노사이트luckclub Casino Sites · ‎Raja · ‎Bet · ‎Bet Online

    ОтветитьУдалить