文件上传自定义样式

最新推荐文章于 2025-10-15 15:35:47 发布

原创最新推荐文章于 2025-10-15 15:35:47 发布 · 448 阅读

CC 4.0 BY-SA版权

<HTML>
    <BODY>
        <div id="tt" style="position:relative;">
            <input type="button" value="添加附件" onmouseover="floatFile()">
            <br>
            <div id="div1">
                <div id="file1text" >
            </div>
                <input id="file1" name="myfile" type="file" onchange="showText(this)" style="position:absolute;filter:alpha(opacity=50);width:30px;" hidefocus>
            </div>
        </div>
        </p>
        <input type="button" onclick="alert($('tt').innerHTML)" value="showHTML">
    </BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
    function $(id)
    {
        return document.getElementById(id);
    }
    //全局变量，记录文件数；
    var fileNum=1;
    //mouseover时，把input file移到按扭上，保证点击的是file，
    function floatFile()
    {
        $("file"+fileNum).style.posTop=event.srcElement.offsetTop;
        $("file"+fileNum).style.posLeft=event.x-$("file"+fileNum).offsetWidth/2;
    }
    //选择完一个文件之后，自动创建一个新的div 和 file表单，用于下回使用，hidden刚用过的file
    function showText(obj)
    {
        $(obj.id+"text").innerHTML=obj.value+"  <a href='javascript:del("+fileNum+")'>删除</a>";
        $("file"+fileNum).style.display='none';
        fileNum=fileNum+1;
        //直接追加innerHTML(innerHTML+=)会清空原来file中的内容
        $("div"+(fileNum-1)).insertAdjacentHTML('AfterEnd','<div id="div'+fileNum+'"><div id="file'+fileNum+'text" ></div><input id="file'+fileNum+'" name="myfile" type="file" onchange="showText(this)" style="position:absolute;filter:alpha(opacity=0);width:30px;"hidefocus></div>');
    }
    function del(id)
    {
        $("div"+id).innerHTML="";
        $("div"+id).style.display="none";
    }

</SCRIPT>

css样式实现背景透明兼容火狐和IE

2011-05-31 17:24:24| 分类：默认分类 | 标签：css opacity 火狐样式背景   |举报 |字号订阅
css代码：

filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
注意：透明背景层上要显示的内容要定位在这个透明背景层上面，不能包含在这个里面，否则会全部透明；