关闭

带有自定义图片的选择文件表单。

933人阅读 评论(0) 收藏 举报

代码如下: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>

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:110010次
    • 积分:1900
    • 等级:
    • 排名:千里之外
    • 原创:58篇
    • 转载:13篇
    • 译文:0篇
    • 评论:11条
    文章分类
    最新评论