<form action="upserver.php" method="POST" target="uploadresult" name="upfiles" enctype="multipart/form-data">
<!--
Цель бытиЯ этого дива здесь - это то, что мы имеем
общий контейнер, для всех динамически создаваемых полей.
Так ими удобнее управлять.
//-->
<div id="filewrapper">
<p><input name="file[]" type="file" size="30" maxlength="2" /><button type="button" onclick="uploader.delfield(this)">DEL</button></p>
</div>
<p>
<button type="button" onclick="uploader.addfield(window)">Добавить поле</button>
<button type="submit" name="send" value="true">Отправить</button>
</p>
</form>
<!-- В этом фрейме будем выводить данные о загрузке файлов //-->
<iframe name="uploadresult" frameborder="0" id="uploadresult" width="600" height="400"></iframe>
<script type="text/javascript">
// Объект "нэймспейса"
var uploader = uploader || {};
// Функция "Удалить поле"
uploader.delfield = function (obj) {
obj.onclick = null;
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
// Функция "Добавить поле"
uploader.addfield = function (GLOB) {
/*
* Здесь код формирует очередное поле загрузки файла,
* т.е. html код элементов, эквивалентный следующему:
*
* <p>
* <input name="file[]" type="file" size="30" />
* <button type="button" onclick="uploader.delfield(this)">DEL</button>
* </p>
*
* Только обработчик onclick назначиться чуть по - другому.
*/
var DOC = GLOB.document,
wrapper = DOC.getElementById("filewrapper"),
htmlP = DOC.createElement("P"),
htmlInput = DOC.createElement("INPUT"),
htmlButton = DOC.createElement("BUTTON"),
htmlButtonText = DOC.createTextNode("DEL");
htmlInput.name = "file[]";
htmlInput.type = "file";
htmlInput.size = "30";
htmlButton.onclick = function() { uploader.delfield(htmlButton) };
// Добавляем всё это хозяйство в DOM дерево документа:
wrapper.appendChild(htmlP);
htmlP.appendChild(htmlInput);
htmlP.appendChild(htmlButton);
htmlButton.appendChild(htmlButtonText);
}
</script>
