<style type="text/css">
?div.fileinputs {
?position: relative;
?}
?div.fakefile {
??position: absolute;
??top: 0px;
??left: 0px;
??z-index: 1;
??border:1px solid red;
?}
?input.file {
??position: relative;
??text-align: right;
??-moz-opacity:0 ;
??filter:alpha(opacity: 0);
??opacity: 0;
??z-index: 2;
?}
</style>
<script>
?/*var W3CDOM = (document.createElement && document.getElementsByTagName);
?function initFileUploads() {
??if (!W3CDOM) return;
??var fakeFileUpload = document.createElement('div');
??fakeFileUpload.className = 'fakefile';
??fakeFileUpload.appendChild(document.createElement('input'));
??var image = document.createElement('img');
??image.src='pix/button_select.gif';
??fakeFileUpload.appendChild(image);
??var x = document.getElementsByTagName('input');
??for (var i=0;i<x.length;i++) {
???if (x[i].type != 'file') continue;
???if (x[i].parentNode.className != 'fileinputs') continue;
???x[i].className = 'file hidden';
???var clone = fakeFileUpload.cloneNode(true);
???x[i].parentNode.appendChild(clone);
???x[i].relatedElement = clone.getElementsByTagName('input')[0];
???x[i].onchange = x[i].onmouseout = function () {
????this.relatedElement.value = this.value;
???}
??}
?}
*/
</script>
改变<input type="file">的“浏览”按钮,其实把这个按钮显示成透明的,在它上面盖了一张图片
<form>
?<div class="fileinputs">
??<input type="file" class="file" onchange="alert(this.value);document.getElementById('fileT').value=this.value"/>
??<div class="fakefile">
???<input name="fileT"/>
???<img src="button3.gif" />
??</div>
?</div>
</form>