Размер и тип файла в input file в jQuery

В прошлой статье "Загрузка файлов на сайт через AJAX в jQuery" мы рассмотрели способ загрузки файла на сайт через HTML форму без перезагрузки страницы. В этой статье продолжим развивать пример, добавив проверку размера файла и расширения перед загрузкой.

Проверка расширения и размера файла

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

Чтобы предотвратить такие недоразумения, необходимо проверять расширение файлов и их размер ещё до начала загрузки AJAX. Попробуем написать для этого код проверки. Допустим, что у нас есть форма из предыдущего примера:

<input type="file" name="photo">

Необходимо делать проверку типа и размера файла сразу после выбора в окне файлов. Делается это с помощью js/jq скрипта:

$('input[name=photo]')[0].bind('change', function() {
   var size = this.files[0].size; // размер в байтах
   var name = this.files[0].name; // имя файла

   if(5000000 < size){
      // файл больше 5 мегабайт
   }

   var fileExtension = ['jpg', 'jpeg', 'png']; // допустимые типы файлов
   if ($.inArray(name.split('.').pop().toLowerCase(), fileExtension) == -1) {
      // у файла неверный тип (расширение)
   }

   // После прохождения всех проверок
   // можно отправлять файл через AJAX на сайт.
   // Но если проверки не пройдены, то надо
   // показать сообщения об ошибках пользователю
});

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

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