Скачал код думал будет все просто разберусь, но не вышло
помогите разобраться какие данные нужно передать в PHP чтоб обработать данные.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Либо - делать то, что заслуживает описания; либо - написать то, что заслуживает прочтения.
Плиний, по Честерфилду
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Временно.нет - пример стилизованного файл-инпута</title>
<style type="text/css">
.someDiv
{
margin-left: 300px;
margin-top: 30px;
border: 1px solid Silver;
height: 300px;
}
#File1
{
float: left;
}
.customFile
{
width: 219px;
margin-left: -225px;
cursor: default;
height: 21px;
z-index: 2;
filter: alpha(opacity: 0);
position: relative;
opacity: 0;
float: left;
}
.fakeButton
{
z-index: 1;
position: relative;
width: 85px;
height: 21px;
background: url(images/button.gif) no-repeat left top;
float: left;
}
.blocker
{
position: relative;
z-index: 3;
width: 150px;
height: 21px;
background: url(images/transparent.gif);
float: left;
margin-left: -240px;
}
.FileName
{
float: left;
height: 15px;
font-family: Verdana;
font-size: 8pt;
color: Gray;
margin-left: 5px;
margin-top: 2px;
padding-top: 1px;
padding-left: 19px;
padding-right: 7px;
}
.minus
{
cursor: pointer;
margin-left: 5px;
width: 16px;
height: 16px;
background: url(images/plusminus.gif) no-repeat left -16px;
float: left;
margin-top: 3px;
}
.wrapper
{
float: left;
width: 100%;
display: block;
margin: 3px;
}
</style>
<script type="text/javascript">
var inputNumber = 1;
window.onload = WindowOnLoad;
function HandleChanges(id)
{
file = document.getElementById(id).value;
reWin = /.*\\(.*)/;
var fileTitle = file.replace(reWin, "$1"); //выдираем название файла для w*s
reUnix = /.*\/(.*)/;
fileTitle = fileTitle.replace(reUnix, "$1"); //выдираем название для *nix
fileName = document.getElementById('name'+id);
fileName.innerHTML = fileTitle;
var RegExExt =/.*\.(.*)/;
var ext = fileTitle.replace(RegExExt, "$1");//и его расширение
var pos;
if (ext){
switch (ext.toLowerCase())
{
case 'doc': pos = '0'; break;
case 'bmp': pos = '16'; break;
case 'jpg': pos = '32'; break;
case 'jpeg': pos = '32'; break;
case 'png': pos = '48'; break;
case 'gif': pos = '64'; break;
case 'psd': pos = '80'; break;
case 'mp3': pos = '96'; break;
case 'wav': pos = '96'; break;
case 'ogg': pos = '96'; break;
case 'avi': pos = '112'; break;
case 'wmv': pos = '112'; break;
case 'flv': pos = '112'; break;
case 'pdf': pos = '128'; break;
case 'exe': pos = '144'; break;
case 'txt': pos = '160'; break;
default: pos = '176'; break;
};
fileName.style.display = 'block';
fileName.style.background = 'url(images/icons.png) no-repeat 0 -'+pos+'px';
};
};
function WrapEverything()
{
inputs = getElementsByClassName('customFileInput');
for (var i = 0 ; i < inputs.length; i++)
wrap(inputs[i]);
};
function wrap(element)
{
wraper = document.createElement('div');
wraper.className = 'wrapper';
fileInput = document.createElement('input');
fileInput.value = '';
fileInput.setAttribute('type','file');
var id = element.getAttribute('id');
wraper.setAttribute('id','wrapper'+id);
fileInput.setAttribute('id',id);
fileInput.className = 'customFile';
fileInput.onchange = function(){ HandleChanges(id) };
fileInput.onmouseover = function() { MakeActive(id) };
fileInput.onmouseout = function() { UnMakeActive(id) };
fileName = document.createElement('div');
fileName.style.display = 'none';
fileName.style.background = 'url(images/icons.png)';
fileName.setAttribute('id','name'+id);
fileName.className = "FileName";
bb = document.createElement('div');
bb.setAttribute('id','bb' + id);
bb.className = 'fakeButton';
bl = document.createElement('div');
bl.setAttribute('id','bl' + id);
bl.className = 'blocker';
wraper.appendChild(bb);
wraper.appendChild(bl);
wraper.appendChild(fileInput);
wraper.appendChild(fileName);
x = element.parentNode;
x.replaceChild(wraper,element);
};
function AddInput(container)
{
wraper = document.createElement('div');
wraper.className = 'wrapper';
fileInput = document.createElement('input');
fileInput.value = '';
fileInput.setAttribute('type','file');
var id = 'customFileInput'+inputNumber;
wraper.setAttribute('id','wrapper'+id);
fileInput.setAttribute('id',id);
fileInput.className = 'customFile';
fileInput.onchange = function(){ HandleChanges(id) };
fileInput.onmouseover = function() { MakeActive(id) };
fileInput.onmouseout = function() { UnMakeActive(id) };
fileName = document.createElement('div');
fileName.style.display = 'none';
fileName.style.background = 'url(images/icons.png)';
fileName.setAttribute('id','name'+id);
fileName.className = "FileName";
bb = document.createElement('div');
bb.setAttribute('id','bb' + id);
bb.className = 'fakeButton';
bl = document.createElement('div');
bl.setAttribute('id','bl' + id);
bl.className = 'blocker';
deleteButton = document.createElement('div');
deleteButton.className = 'minus';
deleteButton.onclick = function() { DeleteCustomInput(id) };
wraper.appendChild(bb);
wraper.appendChild(bl);
wraper.appendChild(fileInput);
wraper.appendChild(fileName);
wraper.appendChild(deleteButton);
container.appendChild(wraper);
inputNumber++;
};
function DeleteCustomInput(id)
{
i = document.getElementById('wrapper'+id);
i.parentNode.removeChild(i);
}
function WindowOnLoad()
{
WrapEverything();
};
function MakeActive(id)
{
bb = document.getElementById('bb'+id);
bb.style.backgroundPosition = '0 -21px';
};
function UnMakeActive(id)
{
bb = document.getElementById('bb'+id);
bb.style.backgroundPosition = '0 0';
};
function getElementsByClassName(searchClass) {
var classElements = new Array();
var els = document.getElementsByTagName('*');
var elsLen = els.length;
var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
};
function addCustomFileInput(container)
{
w = document.getElementById(container);
AddInput(w);
};
</script>
</head>
<body>
<div id="MyInputs">
<input id="File1" type="file" class="customFileInput" />
</div>
<a href="javascript:addCustomFileInput('MyInputs')">добавить еще</a>
</body>
</html>