Проверка данных является неотъемлемой частью любого веб-приложения, поскольку она помогает гарантировать, что загружаемые данные соответствуют определенным требованиям, предъявляемым разработчиками. Данные могут быть проверены как на стороне сервера, так и на стороне клиента, но проверка на стороне клиента часто экономит время пользователей и обеспечивает более удобный и удобный пользовательский интерфейс. Проверка данных на стороне клиента выполняется легко и требует гораздо меньше времени.
В этом практическом руководстве мы рассмотрим процесс создания формы с использованием HTML, JavaScript/jQuery, которая проверяет размер загружаемого файла. Преимущество этой проверки заключается в том, что мы можем ограничить пользователей загрузкой файлов только определенного размера и убедиться, что они строго следуют нашим требованиям. Если файл имеет неправильный размер, мы можем отправить сообщение пользователю, не загружая файл на сервер, что экономит драгоценное время.
Создать веб-страницу
Во-первых, мы создадим простую веб-страницу HTML:
ДОКТИП HTML >
< HTML >
< глава >
< заглавие >
Проверка файл размер пока загрузка с помощью JavaScript / jQuery
заглавие >
глава >
< тело стиль знак равно 'padding-top: 10px; text-align:center;' >
< п > Загрузить файл п >
< вход я бы знак равно 'файл' тип знак равно 'файл' стиль знак равно 'отступ слева: 95px;' />
< бр >< бр >
< кнопка по щелчку знак равно 'Проверка размера()' > Загрузить кнопка >
тело >
HTML >
Понимание кода:
В теле веб-страницы мы просто использовали , <ввод> ,
и <кнопка> ярлык. <ввод> используется, чтобы пользователь мог выбрать файл, а затем загрузить его с помощью кнопки, отображаемой с помощью <кнопка> ярлык.
<кнопка> тег вызывает проверка размера() функция по событию щелчка, которая затем определяет размер файла и печатает соответствующее предупреждение в зависимости от размера файла.
Определить функцию JavaScript sizeValidation()
Теперь давайте напишем код JavaScript, определяющий проверка размера() функция.
< сценарий >
функция проверка размера ( ) {
переменная ввода = документ.getElementById ( 'файл' ) ;
был файл = входные.файлы;
если ( файл.длина== 0 ) {
тревога ( 'Файл не выбран' ) ;
возвращаться ЛОЖЬ ;
}
var fileSize = Math.round ( ( файл [ 0 ] .размер / 1024 ) ) ;
если ( размер файла < знак равно 5 * 1024 ) {
тревога ( 'Загружено' ) ;
} еще {
тревога (
'Ошибка! Слишком большой файл' ) ;
}
}
сценарий >
Понимание кода:
Внутри тела г. проверка размера() мы сначала получаем тег , а затем используем файл var = inputElement.files; строка, чтобы мы могли получить доступ к загружаемому файлу. Затем мы проверяем, был ли загружен файл, если нет, мы выдаем сообщение об ошибке и выходим из функции, возвращая false.
Затем мы используем некоторую математику, чтобы определить размер файла. Если файл имеет подходящий размер, то есть 5 МБ (в данном случае), он загружается.
В противном случае отображается всплывающее окно с сообщением об ошибке.
Вывод
Несмотря на то, что проверка на стороне клиента намного эффективнее, она все же не заменяет проверку на стороне сервера и в большинстве случаев ее можно обойти. Всегда рекомендуется реализовывать проверку как на стороне сервера, так и на стороне клиента, чтобы вы могли обеспечить как эффективность, так и точность своего приложения.