HTML5. Атрибут multiple элемента <input>.

В HTML5 у элемента <input> появился атрибут multiple. Он позволяет загружать одновременно несколько файлов либо несколько email адресов. Использовать его имеет смысл только для <input type=’email’> и <input type=’file’>.

Рассмотрим подробнее <input type=’email’ multiple>.  Что нам это дает? Не так уж и много. По своей сути данный тип аналогичен <input type=’text’>, но с добавлением автоматической проверки вводимого текста в поле на соответствие шаблону:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

или шаблону при установленном multiple:

/^([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*,{0,1}\s*){1,}$/

То есть при установленном атрибуте multiple для тега инпут можно перечислять email через запятую, а без него можно указать только один email.

Если же мы отключаем автоматическую проверку валидности формы, то разницы между <input type=’email’ multiple> и <input type=’email’> нет никакой. И там, и там мы можем вносить любой текст. Отключить проверку валидности можно устновив атрибут formnovalidate:

 <input type='submit' formnovalidate>

А вот для файлового инпута атрибут multiple действительно полезный. Теперь мы можем за один раз указывать для закачки сразу несколько файлов стандартными средствами браузера.

Для тестов можно использовать php файл со следующим содержимым:

<!DOCTYPE HTML>
<html>
<form method="post" enctype="multipart/form-data">
<label>Cc: <input type=email multiple name='cc'></label>
<br>
<input type=email name=oneE ><br>
<input type=file name=oneF ><br>
<input type=file name='fewF[]' multiple><br>
<input type=submit value=ok>
</form>
<?php
print_r($_REQUEST);
echo '<br><br>';
print_r($_FILES);

foreach($_FILES['fewF']['name'] as $key=>$val)
{
 move_uploaded_file($_FILES['fewF']['tmp_name'][$key],$val);
}
?>
</html> 

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

полезные ссылки:

  1. загрузка нескольких файлов на php
  2. спецификация input type=file
  3. спецификация input type=email
  4. атрибут multiple

 

 

 

Добавить комментарий