Html input[type=file]在chrome浏览器和safari浏览器 与 IE firefox差别修改

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

在没有修改前如图：

修改浏览器默认input标签js 与css样式

div.fileinputs {position: relative;}div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;z-index: 2;}<div class="fileinputs"><input type="file" class="file" /><div class="fakefile"><input /><img src="search.gif" /></div></div>

在一个老外的网站上面看的 顺便整理了下