Показать сообщение отдельно
  #1 (permalink)  
Старый 23.11.2010, 15:29
Новичок на форуме
Отправить личное сообщение для Jazz411 Посмотреть профиль Найти все сообщения от Jazz411
 
Регистрация: 23.11.2010
Сообщений: 6

Помогите разобраться
Скачал код думал будет все просто разберусь, но не вышло помогите разобраться какие данные нужно передать в 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>

Последний раз редактировалось Gvozd, 24.11.2010 в 01:42. Причина: отформатировал код
Ответить с цитированием