Что я подразумеваю под загрузкой произвольного количества: пользователь выбирает сколько угодно файлов, нажимает кнопку “загрузить” и файлы загружаются на сервер и обрабатываются. Новые поля для выбора файлов создаются динамически.

Шаг 1: Создаём форму

<form method=”POST” id=”upform” name=”upform” enctype=”multipart/form-data”>
<input type=”file” size=”50″ onchange=”addElement()” name=”first”>
</form>

<input type=”button” value=”Загрузить” onclick=”upform.submit()”>

На форме у нас всего один элемент для загрузки файлов под именем first и назначено событие на изменение(выбор) файла - addElement(). Кнопка загрузить стоит отдельно от формы, почему сделано именно так будет объяснено далее.

Шаг 2: Создаем javascript функцию динамического добавления нового поля для файла

<script>
function addElement() {
var uf = document.getElementById(’upform’);

// Создаём новое поле для выбора файла
var newFile = document.createElement(’input’);

var fileIdName = ‘myFile’+Math.random(); //Случайное имя

newFile.setAttribute(’id’,fileIdName);
newFile.setAttribute(’name’,fileIdName);
newFile.setAttribute(’type’,'file’);
newFile.setAttribute(’size’,'50′);

// при выборе файла данное поле тоже должно добавлять еще одно поле
newFile.setAttribute(’onChange’,'addElement()’);
newFile.onchange = addElement;

uf.appendChild(newFile); // добавляем поле к форме, поле добавится в конец формы, потому мы ранее
// и вынесли кнопку “загрузить” за форму - логичнее она будет смотреться в конце
}
</script>

Шаг 3: Обработка загруженных файлов на сервере

Для обработки файлов на сервере вставляем следующий код:

foreach ($_FILES as $file) {

// здесь стандартная обработка загруженных файлов, примеров в интернете полно
// также здесь можно проверять, например, что это динамически добавлненное поле (у нас оно начинается с “myFile”)

}

Рабочий пример можно посмотреть здесь (в примере опущено enctype=”multipart/form-data”).

Код написан для админки одного из сайтов фирмы Бош, он не идеален (например если два раза выбрать файл в первом поле, то будет два пустых поля), но это не сложно добавить самим ;) Гарантированно работает в Firefox, IE, Opera. Удачного кодинга!

UPDATE: по просьбе выкладываю серверную часть загрузки файлов

Шаг 3.1: Обработка загруженных файлов на сервере (код)

Вот приблизительный код(урезанный), который я использую. Имейте в виду что код используется строго в админке, по этому в паблик доступе с безопасностью могут быть проблемы ;)

$upload_path = $_SERVER[’DOCUMENT_ROOT’].”/uploads”;
$valid_types = array(
“pdf”, ‘doc’, ‘txt’, ‘jpg’,'xls’,'gif’,'png’,'zip’,'rar’
);
$max_file_size = “10000000″;

if (sizeof($_FILES)>0) {
$errors = array();

foreach ($_FILES as $file) {
if (strlen($file[”name”])<=0)
continue;
if (is_uploaded_file($file[’tmp_name’])) {
$filename = $file[’tmp_name’];
$ext = substr($file[’name’], 1 + strrpos($file[’name’], “.”));
$ext = strtolower($ext);
$name = $file[’name’];
if (file_exists($upload_path.$name)) {
$errors[$name] = “\nТакой файл уже существует”;
} elseif (filesize($filename) > $max_file_size) {
$errors[$name] = “\nРазмер файла больше 10 мегабайт”;
} elseif (!in_array($ext, $valid_types)) {
$errors[$name] = “\nНе верный тип файла. “;
} else {
$size =$file[’size’];
if (@move_uploaded_file($filename, $upload_path.$name)) {
// Здесь запись в базу, если необходимо
} else {
$errors[$name] = “\nОшибка перемещения файла. “;
}

}
} else {
$errors[$name] = “\nНеобходимо выбрать правильный файл.”;
}
}
}

Небольшие комментарии:

  • в $errors падают ошибки загрузки файлов
  • в коде проверяются ТОЛЬКО расширения по списку ($valid_types), но не реальныйтип файла
  • и да - 10 мегабайт, не 10000000 байт, я в курсе :)
Шлак, в топкуКакахаПойдетИнтересноЭто 5, спасибо (4 голосов, средний бал: 4.75 из 5)