Как ограничить размер загружаемого файла js

Обновлено: 07.07.2024

Есть ли способ проверить в браузере на стороне клиента, превышает ли размер файла, загружаемого со страницы JSP, установленный предел размера, не заставляя пользователя загружать весь файл только для того, чтобы определить, что он слишком большой?

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

3 ответа

Это не идеальное решение, но если вы проверяете HTTP-заголовок Content-Length с помощью request.getHeader("Content-Length") , вы можете отказаться передать весь файл.

Объяснение: очень большой файл не будет передан сразу. Вам действительно нужно открыть поток, представляющий этот кусок данных POST, и прочитать из него весь объект, который будет передан.

С другой стороны, если вы беспокоитесь о атаках типа «отказ в обслуживании», вы не можете доверять заголовку Content-Length, поскольку его легко подделать. В этом случае вам следует установить лимит и организовать потоковую передачу этого файла, остановив его, как только вы превысите этот лимит.

Предлагаем вам пересмотреть решение по Flash и взглянуть на YUI Uploader, здесь:

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

С помощью JSP или PHP вы не сможете ограничить размер файла, потому что ваша страница не получит запрос, пока загрузка не произойдет. В этот момент вы можете решить не сохранять файл, но это может быть слишком поздно.

Есть несколько решений Java, например, MyUploader или Гермес . Некоторые даже поддерживают загрузку нескольких файлов и возобновление частичной загрузки, а некоторые также предоставляют исходный код. Вы также можете написать свой собственный, но для работы он должен быть подписанным апплетом, потому что ему необходим доступ к локальной файловой системе. Если вы используете Apache в качестве веб-сервера, вам потребуется достаточно оперативной памяти на вашем компьютере, чтобы вместить весь размер файла в память всех файлов, загружаемых в данный момент времени.

В этой небольшой заметке рассмотрен способ загрузки очень больших файлов (больше 2Гб) через браузер. Метод приведенный в этой заметке хорош тем что:

Плох этот методом тем, что требует использования браузера на базе Gecko 2.0 и выше или WebKit. На текущий момент, это такие браузеры как FireFox 4.0+, SeaMonkey 2.1+ или Google Chrome 11+.

Основная идея

Стоит обратить внимание, что метод slice() объекта Blob устарел начиная с версии Gecko 2.0 (FireFox 4), метод mozSlice() добавлен в Gecko 5.0 (FireFox 5) и метод webkitSlice() добавлен Google Chrome 11.

fileuploader.js

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

// Позиция, с которой будем загружать файл
this . position = 0 ;

// Размер загружаемого файла
this . filesize = 0 ;

// Объект Blob или File (FileList[i])
this . file = null ;

// Ассоциативный массив опций
this . options = ioptions ;

// Текущий объект
var that = this ;

// Позиция с которой будем загружать файл
var loadfrom = from ;

// Объект Blob, для частичного считывания файла
var blob = null ;

that. blob = null ;

var files = evt. target . files ;

upload.php

PHP скрипт, работает на стороне сервера. Его задача - принимать и склеивать порции. После окончания передачи всех порций скрипт переименовывает файл и создает флаг сигнализирующий о том что файл готов к обработке. В моем случае отдельный демон проверяет этот флаг и берет файлы "в оборот".

// Каталог в который будет загружаться файл
$uploaddir = "./uploaddir" ;

// Имя файла получим из идентификатора загрузки
$filename = $uploaddir . "/" . $hash . ".html5upload" ;

index.php

Файл с HTML формой и инициализацией скрипта загрузки.

Заголовок HTML документа. Здесь, для примера, подменен идентификатор загрузки. Вы можете генерировать его на свое усмотрение.

Таблица стилей для индикатора прогресса (PorgressBar)

Подключение класса загрузки. Антикеш на всякий случай.

< script type = "text/javascript" src = "./fileuploader.js?nc=<?php print time();?> "> < / script >

Форма загрузки. Изначально она скрыта, отображается только после успешной инициализации объекта-загрузчика.

< p > Максимальный размер файла при загрузке через браузер - < b > 4Гб < / b > . < / p >

< form action = "./" method = "post" id = "uploadform" onsubmit = "return false;" style = "display:none;" >

< table cellspacing = 1 >
< tr >< td >< div id = "message" > Выберите файл: < / div >< / td >< td >< input type = "file" id = "files" name = "files[]" / >< / td >< / t>
< / table >
< input type = "submit" value = "Загрузить >>" / >

Индикатор прогресса (PorgressBar) и подсказки

< div id = "cnuploader_progressbar" >< / div >
< div id = "cnuploader_progresscomplete" >< / div >

< p > Вы сможете добавить название и описание после того как видео будет загружено на сервер. < / p >

< p > Мы принимаем видео, не нарушающее требования российского законодательства (не содержащее порнографию, ненормативную лексику, призыв к насилию и т.д.) и не содержащее рекламу. < / p >

< p > Используется загрузчик HTML5 < / p >

< script type = "text/javascript" >

// ID элемента формы
form : 'uploadform' ,

// ID элемента <input type=file
formfiles : 'files' ,

// Идентификатор загрузки. В нашему случе хэш.
uploadid : '<?php print $hash;?>' ,

// URL скрипта загрузки (описан выше).
uploadscript : './upload.php' ,

Минификация CSS , JS , HTML файлов (не путать со сжатием CSS ) включает в себя удаление любых ненужных символов из файла, чтобы уменьшить его размер и тем самым ускорить загрузку.

Ниже приведены примеры того, что удаляется во время минификации файла:

Символы пробелов;
Комментарии;
Разрывы строк;
Разделители блоков.

В большинстве случаев процесс минификации не влияет на файл, а оптимизирует его для загрузки. Особенно полезна минификация CSS , JS и HTML-файлов . Кроме этого Google при ранжировании учитывает быстродействие ресурса, а минификация помогает ускорить работу сайта.

Чтобы различать минифицированные файлы, в их имена добавляется расширение .min ( например: foobar.min.css ).

Разница между минификацией и сжатием

Минификация и сжатие CSS файлов – это не одно и то же. Хотя оба этих метода предназначены для уменьшения времени загрузки. Различие заключается в том, как они работают. Сжатие используется для уменьшения размера файла при помощи алгоритмов сжатия, таких как Gzip или brotli . Файлы сжимаются перед отправкой клиенту.

Следовательно, процесс сжатия осуществляется следующим образом:

Файл сжимается с помощью алгоритма сжатия;
Выполняется запрос для сжатой версии файла;
Сжатый файл отправляется от сервера к клиенту;
Клиент распаковывает файл и считывает информацию.

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

Если браузер не поддерживает конкретный алгоритм сжатия, сервер будет отправлять данные в первоначальном виде ( без обработки ).

Пример минификации

В следующем примере показано, как CSS файл выглядит до и после минификации.

ДО CSS минификации:

ПОСЛЕ CSS минификации:

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

Минификация CSS

Онлайн

Инструменты разработки

Минификация JS

Онлайн

Инструменты разработки

yui.github.io : предоставляет возможность минимизировать JS файлы для веб-проектов.

Минификация HTML

WordPress плагины для минификации

Better WordPress Minify ;
Autoptimize .

Многие плагины кэширования также предлагают возможность минификации. Например, Cache Enabler поставляется с возможностью включения минификации HTML и JS . Использование этой функции позволяет уменьшить время загрузки веб-страниц, но в некоторых случаях это может привести к конфликту с другим плагином сжатия CSS WordPress .

Drupal модуль минификации

В сообществе Drupal популярным вариантом для минификации является модуль Minify . Он позволяет минимизировать HTML , JavaScript файлы и использует компилятор Google Closure , чтобы проанализировать минификацию. Конфигурация данного модуля проходит быстро.

Joomla! Расширение для минификации

CMS Joomla также предлагает расширение для оптимизации сайта под названием JCH Optimize , которое уменьшает размер JavaScript и производит сжатие CSS файлов . Оно также предоставляет возможность включить GZIP сжатие для агрегированных файлов.

Преимущества уменьшения файлов

Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, отклики, дизлайки, лайки!

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

Суть задачи

Для нетерпеливых сразу ссылки на демо приложения и исходники

Подготовим шаблон проекта.

В корень проекта положим файл index.html, в папку js файлы jquery.min.js и main.js (не забудем их подключить в index.html). Серверный код будет выполнять upload.php из папки php, а для полученных файлов создадим папку upload.

Получится так:

html-заготовка формы

Создадим простейшую форму в index.html

Заметим, что никаких атрибутов, вроде enctype у формы или name у input-ов, навешивать не нужно - все сделает javascript.

Базовый клиентский код

Мы создали модуль приложения app, и в методе init подключили обработку сабмита формы. В функции submitForm данные для отправки готовятся с помощью объекта formdata соответствующего класса FormData. Перебирая все поля выбора файлов .js-photos, мы добавляем файлы к этому объекту методом append. Обратите внимание на название photos[] - квадратные скобки обязательны, так как в противном случае на сервер попадет не массив файлов, а только один.

Валидацию пока не делаем, рассмотрим ее ниже. А пока переходим к серверной части.

Принимаем файлы на сервере и перемещаем в нужную папку

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

Сначала мы извлекаем массив файлов из $_FILES['photos'] и отпределяем папку назначения - куда мы копируем искомые файлы. PHP предварительно копирует файлы во временную папку, свойство tmp_name из $_FILES даст нам полный путь к этому временному файлу. Далее перебираем наш массив и перемещаем файлы в нужную папку под тем же названием, с которым он пришел с клиента. Этим занимается функция move_uploaded_file. В конце возвращаем клиенту успешный код ответа.

Валидация файлов на клиенте

1. Выбран ли вообще файл
2. Не превышает ли его размер максимальный
3. Подходит ли файл по формату

Например, ошибка может выглядеть так.

Это означает, что в input[0] (в первом по счету поле) пользователь добавил файл test.pdf, формат которого не поддерживается, так как мы просим изображения. Это одна ошибка валидации. А массив таких ошибок и будет результатом выполнения функции. Если ошибок нет, все файлы выбраны и заданы правильно, то вернем пустой массив.

Впрочем, сейчас посмотрим, как это работает. Добавим функцию валидации validateFiles.

В параметре options мы передаем объект из трех полей: $files, maxSize и types. Соответственно, это jQuery-массив элементов input, максимальный размер файла в байтах и массив допустимых типов-расширений файлов, например, image/jpg, image/png или application/pdf - список типов легко можно загуглить.

Мы перебираем массив файлов и последовательно делаем проверки. Сначала смотрим, выбран ли вообще файл. Если нет, добавляем в результирующий массив ошибок пукнт с кодом no_file. Это будет объект-ошибка - имени предсказуемо нет. Дальше мы сразу переходим к следующему файлу, проверит размер и расширение мы не сможем.

Проверка на максимальный размер в случае неуспеха вернет объект , а несоответствие типа -

Обратите внимание, если в одном файле ловится несколько ошибок (максимум две в нашем случае), например, test.pdf слишком большого веса, то в результате мы получим 2 объекта. Имеет смысл группировать эти ошибки по имени файла, но не хочется усложнять код. В конце концов, если это необходимо, Вы сможете обработать выводимый результат как угодно.

Функцию написали, осталось задействовать ее в основном потоке кода. Немного расширим код submitForm:

Как видим, мы добавили вызов validateFiles с нужными параметрами. Максимальный размер файла ограничим 2 Мб, а типы возьмем jpg и png-картинки. После вызова проверяем, не пустой ли массив полученных ошибок, и если таки не пустой, то выводим результаты в консоль и выходим из функции сабмита. Файлы на сервер не уйдут.

Как обрабатывать ошибки и показывать их пользователю - дело исключительно хозяйское :-) Нам сейчас главное убедиться, что наша валидация работает.

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

Валидация файлов на сервере

Вообще для посетителей сайта будет срабатывать клиентская валидация. Тем самым наши посетители получат мгновенную обратную связь, а сервер освободится от ненужной работы. Но в случае получения пользовательских данных всегда нужно проводить дополнительную валидацию на стороне сервера. Этим мы и займемся.

php-шная функция валидации будет проверять ровно те же параметры, что и клиентская. Но кроме двух пунктов: проверки на наличие файла и возврат индекса. Это связано с тем, что мы проверяем все файлы пришедшие с клиента и не знаем, что некоторые клиент мог не заполнить. Лучше увидеть на примере. Напишем саму функцию

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

После этого остается использовать написанную функцию в основном коде

Вот и все. Как видим, валидация на сервере подключена ровно таким же способом, как и на клиенте.

Чтобы убедиться, что и серверная валидация успешно работает, закомментируйте одну строку в main.js

Например, если Вы пропустите первое поле, во второе загрузите pdf-ку, а в третье - валидную картинку, то увидите примерно такую картину

Читайте также: