Style Input type file with css and javascript

by Kuldeep Sheoran

HTML

<br/>
<br/>


<span class="upload_wrapper" style="float: left;">
       <input type="button" value="Upload File"/>
        <input  style="width: 100px;height:100px;" id="uploadbtn1" name="pic[]" type="file" class="upload" onchange="show_selected_file(this.id);"/>
        </span>
        <span id="name">No file selected
        </span>

CSS

.upload_wrapper {
	position: relative;
	overflow: hidden;
        cursor: pointer;
	//margin: 10px;
}
.upload_wrapper input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
#name
{
    min-width: 40px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    
}

JavaScript

function show_selected_file(id)
{
 
 var en=document.getElementById(id).value; 
 document.getElementById("name").innerHTML=en;
}