Post

使用透明叠加法美化文件上传界面

Posted
By ZhangSichu
1 min read

使用透明叠加法的方法实现没有使用Iframe的操作。把文件域放在点击的span上，并让它透明。这样用户看到的是自定义span点击区域，看不到文件浏览的区域。点击的依然是浏览按钮，没有违反任何安全机制。
原方法借鉴位置。 https://www.script8.com/bbs/thread.asp?tid=6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<html>  
    <head>  
        <title>Test HTML</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
        <style>  
        body   
        {  
            font-size:12px;  
            cursor:default;  
        }  
        .hand  
        {  
            cursor:pointer;  
            cursor:hand;  
        }  
        .btnFade  
        {  
            position:absolute;  
            padding-top:3px;  
            font-family:宋体;  
        }  
        .btnReal  
        {  
            position:absolute;  
            width:60px;  
            overflow: hidden;  
            -moz-opacity: 0.5; /* Old Mozilla Browsers */
            -webkit-opacity: 0.5; /* Old Webkit browsers (Safari, Chrome, various others) */
            -khtml-opacity: 0.5; /* Really old Safari browsers and Konqueror */
            opacity: 0.5; /* Modern browsers */
        }  
        .fileElement  
        {  
            float:left;  
            margin-right:6;  
            padding-top:3;  
            color:darkgreen;  
        }  
        </style>  
    </head>  
    <body onload="setup();"> 
    <script language="javascript" type="text/javascript">   
        //Use the reload tech could hide some control ui.  
        function setup(){ 
            $("btnReal").innerHTML = "<input onchange=\"addFile(this);\" type=\"file\" size=\"1\" class=\"hand\" hidefocus=\"true\" />"; 
        }  

        function addFile(file){ 
            //Create object append filename.  
            var fileName,fileElement;  
            fileName=file.value.replace(/\\/g,"/").replace(/(.*\/)(.*)/,"$2"); 
            file.style.display = "none"; 
            fileElement=document.createElement("nobr"); // just want to display the file. 
            fileElement.className="fileElement"; 
            fileElement.innerHTML = "□"+fileName; //Add the fileName.
            fileElement.innerHTML += "<font style=color:red;font-weight:bold; onclick=\"$(fileList).removeChild(this.parentNode);\" class=hand>"+ unescape("×")+"</font>"; //Add the delete button. 
            $("fileList").insertBefore(fileElement,$("btnFile"));
            setup();
        }

        function $(element){  
            return typeof(element)== "object" ? element : document.getElementById(element);
        }  
    </script>
    <div id="fileList">  
        <div id="btnFile" onmouseover="$(btnFade).style.textDecoration=underline;" onmouseout="$(btnFade).style.textDecoration=none;" style="color:Navy"> <!--this div just want to display a hand.-->
            <span id="btnFade" class="btnFade" style="cursor:pointer">#@#添加附件</span>
            <span id="btnReal" class="btnReal" onmouseover="this.scrollLeft=100px"></span>
        </div>  
    </div>  
    </body>  
</html>
Web开发
Design GUI Web
This post is licensed under CC BY 4.0 by the author.