Блог Вована

Когда-то давно не dirty.ru проскакивал простенький скрипт: он добавлял для ссылок с википедии, ливжорнала и т.д. лого сайта перед ссылкой.  Мне это показалось тогда не достаточно удобным: когда в посте несколько ссылок подряд, например, на youtube ролики, то получается каша.

И вот недавно я написал свою реализацию скрипта: в постах и комментариях, при наведении на ссылку мышкой, появляется лого сайта (favicon), если оно есть. Читать полностью »

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

Шаг 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: по просьбе выкладываю серверную часть загрузки файлов Читать полностью »