当前位置: 代码迷 >> Web前端 >> 改变文件下传按钮样式 input button
  详细解决方案

改变文件下传按钮样式 input button

热度:127   发布时间:2012-11-01 11:11:32.0
改变文件上传按钮样式 input button

<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>

  相关解决方案