CSS Creator Styling file upload field and browse button

Posted: Mon, 2008-04-07 15:51

Hey guys,

I am trying to create a better file upload field and browse button, rather than the naff default button and field that are used by the browser...

I ahve research this, and it seems that it VERY DIFFICULT to style this, most examples use javaScript, which im not really too experienced in to understand how to code it, i get the basics of the code and what it does, but not how to edit or anything.

The example i have been using is from the url:http://www.quirksmode.org/dom/inputfile.html which the seems to be the most popular method, as just CSS techniques dont allow you to show the file that has been selected in your field box.

I have tried the example with javascript, in a separate [age, as i dont want to add it to my webpage and css untill i see it working on its own. I tried it, and guess what.....it doesnt work!!

here is the code (i put the styling on the same page just for this example):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Style1.css" />
<title>file upload example</title>
<style type="text/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;
}
</style>
<script type="text/javascript">

var W3CDOM = (document.createElement && document.getElementsByTagName);

function init() {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='Images/cancelLogo.png';
	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].getAttribute('noscript')) 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];
		if (x[i].value)
			x[i].onchange();
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
	}
}

</script>
</head>

<body>
<div class="fileinputs">
	<input type="file" class="file">
</div>
</body>
</html>

at the moment i get a blank screen, but the field is there, as if you click around, the windows explorer window pops up to select your image....

can someone help me?

cheers

Craig

Styling file upload field and browse button

Or even following article

Online users