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

最新推荐文章于 2021-12-28 11:49:22 发布

原创最新推荐文章于 2021-12-28 11:49:22 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #input #html #action #div #file

HTML 专栏收录该内容

4 篇文章

订阅专栏

代码如下：browse.gif 是用来浏览文件的图片，宽度可以为10-70像素

<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>