代码如下:browse.gif 是用来浏览文件的图片,宽度可以为10-70像素
<!-- copyright leechiyang lazyperson(at)eyou.com -->
<
html
<body >
< form method ="post" action ="" enctype ="multipart/form-data" >
< input id ="filename" >
< br >
< img src ="browse.gif" width ="60" height ="30" id ="browseImage" />
< br >
< input type ="submit" value ="提交" >
< div style ="width:40px; overflow:hidden; position:absolute;filter:alpha(opacity=70);-Moz-opacity:0.7;" id ="fileDiv" >
< input type ="file" name ="uploadfile" id ="uploadfile" onchange ="SetFileName()" size ='16' style ="width:200px; position: relative;" /></ div >
</ form >
< script >
function GetElementAbsolutX(element)
{
return element ? element.offsetLeft + GetElementAbsolutX(element.offsetParent) : 0 ;
}
function GetElementAbsolutY(element)
{
return element ? element.offsetTop + GetElementAbsolutY(element.offsetParent) : 0 ;
}
function InitPosition()
{
var fileDiv = document.getElementById( " fileDiv " );
var browseImage = document.getElementById( " browseImage " );
var uploadfile = document.getElementById( " uploadfile " );
fileDiv.style.width = browseImage.width + " px " ;
uploadfile.style.left = ( browseImage.width - 200 ) + " px "
uploadfile.style.height = browseImage.height + " px " ;
fileDiv.style.left = GetElementAbsolutX(browseImage) + " px " ;
fileDiv.style.top = GetElementAbsolutY(browseImage) + " px " ;
}
function SetFileName()
{
var uploadfile = document.getElementById( " uploadfile " );
var filename = document.getElementById( " filename " );
filename.value = uploadfile.value;
}
InitPosition();
</ script >
</ body >
</ html >
<body >
< form method ="post" action ="" enctype ="multipart/form-data" >
< input id ="filename" >
< br >
< img src ="browse.gif" width ="60" height ="30" id ="browseImage" />
< br >
< input type ="submit" value ="提交" >
< div style ="width:40px; overflow:hidden; position:absolute;filter:alpha(opacity=70);-Moz-opacity:0.7;" id ="fileDiv" >
< input type ="file" name ="uploadfile" id ="uploadfile" onchange ="SetFileName()" size ='16' style ="width:200px; position: relative;" /></ div >
</ form >
< script >
function GetElementAbsolutX(element)
{
return element ? element.offsetLeft + GetElementAbsolutX(element.offsetParent) : 0 ;
}
function GetElementAbsolutY(element)
{
return element ? element.offsetTop + GetElementAbsolutY(element.offsetParent) : 0 ;
}
function InitPosition()
{
var fileDiv = document.getElementById( " fileDiv " );
var browseImage = document.getElementById( " browseImage " );
var uploadfile = document.getElementById( " uploadfile " );
fileDiv.style.width = browseImage.width + " px " ;
uploadfile.style.left = ( browseImage.width - 200 ) + " px "
uploadfile.style.height = browseImage.height + " px " ;
fileDiv.style.left = GetElementAbsolutX(browseImage) + " px " ;
fileDiv.style.top = GetElementAbsolutY(browseImage) + " px " ;
}
function SetFileName()
{
var uploadfile = document.getElementById( " uploadfile " );
var filename = document.getElementById( " filename " );
filename.value = uploadfile.value;
}
InitPosition();
</ script >
</ body >
</ html >