file upload with Design

<style type="text/css">
	input.file {
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity:0;
	position:relative;
	z-index:2;
}
div.fileinputs {
	position:relative;
}
div.fakefile {
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	text-align:right;
}
div.fakefile * {
	vertical-align:middle;
}
input.fakeinput {
	border:1px solid #ddd;
	margin-right:5px;
}
</style>

<script type="text/javascript">
var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads(classname,position,size,fakewidth) {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.style.width = 100 + "%";
	fakeFileUpload.style.textAlign = position;
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='filesearch.gif';
	image.style.verticalAlign = 'middle';
	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].className != classname) 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].setAttribute('size',size);
		x[i].relatedElement = clone.getElementsByTagName('input')[0];
		x[i].relatedElement.className = 'fakeinput';
		x[i].relatedElement.style.width = fakewidth + 'px';
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
		x[i].parentNode.style.textAlign = position;
	}
}
</script>

<div class="fileinputs">
	<input type="file" class="file" />
</div>
<script type="text/javascript">initFileUploads('file','center',40,310);</script>