lo scriptino che si trova in giro ha un difetto... devo aggiungere codice
questo scriptino fa tutto da solo, dovremo inserire solo il codice per il campo file
non gestisce gli stile con selettore # o inline... non copia gli eventi definiti per il campo file (servono?!)
il codice javascript mi sembra pulito e semplice da capire... testatelo per bug e miglioramenti... se vi piace bon
codice:<!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" xml:lang="it"> <head> <script type="text/javascript"> (function () { var texts = { en : { browse : 'Browse...' }, it : { browse : 'Sfoglia...' } } ; (function (f) { if (window.attachEvent) window.attachEvent('onload', f); else if (window.addEventListener) window.addEventListener('load', f, false); else window['onload'] = f; })( function () { var i ; var elements = document.getElementsByTagName('input') ; var file ; for (i = 0 ; i < elements.length ; i++) { // check for file fields if (elements[i].getAttribute('type') == 'file') { file = elements[i] ; // hide field file.setAttribute('style', '-moz-opacity:0.5;') ; file.style.position = 'absolute' ; file.style.left = '-10000px' ; file.style.filter = 'alpha(opacity=0)' ; file.style.opacity = '0' ; // create textbox var textbox = document.createElement('input') ; textbox.setAttribute('type', 'text') ; textbox.setAttribute('title', file.getAttribute('title')) ; textbox.setAttribute('readOnly', 'readonly') ; textbox.setAttribute('className', file.getAttribute('className')) ; textbox.setAttribute('class', file.getAttribute('class')) ; // create button var button = document.createElement('input') ; button.setAttribute('type', 'button') ; button.setAttribute('title', file.getAttribute('title')) ; button.setAttribute('value', texts[navigator.browserLanguage ? navigator.browserLanguage : navigator.language].browse) ; button.setAttribute('className', file.getAttribute('classbutton')) ; button.setAttribute('class', file.getAttribute('classbutton')) ; // add button event (function (f) { if (button.attachEvent) button.attachEvent('onmouseover', f); else if (button.addEventListener) button.addEventListener('mouseover', f, false); else button['onmouseover'] = f; })( (function (btn, ff) { return(function () { // button rect var x = btn.offsetLeft ; var y = btn.offsetTop ; var w = btn.offsetWidth ; var h = btn.offsetHeight ; var p = btn.offsetParent ; while (p) { x += p.offsetLeft ; y += p.offsetTop ; p = p.offsetParent ; } // check for mouse pointer in/out button rect var f = function (event) { if (event.clientX >= x && event.clientX <= (x + w - 1) && event.clientY >= y && event.clientY <= (y + h - 1)) { ff.style.left = (event.clientX - ff.offsetWidth + 10) + 'px' ; ff.style.top = (event.clientY - 10) + 'px' ; } else { ff.style.left = '-10000px' ; // remove handler (function (f) { if (document.body.detachEvent) document.body.detachEvent('onmousemove', f); else if (document.body.removeEventListener) document.body.removeEventListener('mousemove', f, false); else document.body['onmousemove'] = null; })( f ) ; } } ; // add handler to move file field over the button (function (f) { if (document.body.attachEvent) document.body.attachEvent('onmousemove', f); else if (document.body.addEventListener) document.body.addEventListener('mousemove', f, false); else document.body['onmousemove'] = f; })( f ) }) })(button, file) ) ; // add file field event (function (f) { if (file.attachEvent) file.attachEvent('onchange', f); else if (file.addEventListener) file.addEventListener('change', f, false); else file['onchange'] = f; })( (function (txt, ff) { return(function () { txt.value = ff.value ; ff.style.left = '-10000px' ; }) })(textbox, file) ) ; // insert new elements file.parentNode.insertBefore(textbox, file) ; file.parentNode.insertBefore(button, file) ; // skip file field i++ ; i++ ; } } } ) ; }) () ; </script> <style> body {margin:100px;} .ff1 {background:cyan;border:1px solid red;} .btn1 {width:123px;color:red;} .ff2 {background:yellow;border:1px solid green;} .btn2 {width:123px;color:green} </style> </head> <body> <form action="" method="post"> <input type="text" name="testo" id="testo" /> <input type="file" name="ff1" class="ff1" classbutton="btn1" /> <input type="file" name="ff2" class="ff2" classbutton="btn2" /> </form> </html>
Rispondi quotando
