模拟126的附件添加特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试附件</title>
<style type="text/css">
/*附件开始*/
a.files, span.del_file {overflow:hidden;display:-moz-inline-box;display:inline-block;background:url(F2.gif);}
a.files { width:50px;height:15px; #vertical-align:middle;}
a.files:hover {background-position:0 -24px;}
a.files input {margin-left:-160px;filter:alpha(opacity=0);opacity:0;}
span.del_file {width:7px;height:7px;background-position:0 -51px;vertical-align:middle;#vertical-align:sub;margin-left:2px;cursor:pointer;}
/*附件结束*/
</style>
<script type="text/javascript">
var File = {
/*
模拟126的附件添加特效
-------------------------------------------------------
**num
    为元素的下标
**count
    为元素的个数
**name
    为元素的名字和ID的前段（元素的实际名称是前段加下标）
**status
    为状态的ID
**form
    为表单的ID
-------------------------------------------------------
*/
    num : 1, count : 0

    , name : 'file', status : 'file', form : 'form'

    , urls : {}

    , add : function (file) {
    //添加附件
        if (this.urls[file.value]) {
            alert('此文件已存在');
            return false;
        }

        var a = file.parentNode, status = document.getElementById(this.status);

        this.urls[file.value] = 1;

        document.getElementById(this.form).appendChild(file);

        if (/Firefox/.test(window.navigator.userAgent)) {
        //中转一下，否则FF里有很NB的错误会出现。。。
            var b = a, a = a.cloneNode(true);
            b.parentNode.replaceChild(a, b);
            b = null;
        }

        file.style.display = 'none';

        a.innerHTML = '<input id="' + this.name + (this.num + 1) + '" name="' + this.name + (this.num + 1) + '" onchange="File.add(this)" type="file" \/>';

        status.innerHTML += ' <span>' + (/[^\\]+$/.exec(file.value)||'') + '<span class="del_file" onclick="File.del(this, ' + this.num + ')"><\/span>;<\/span>'


        this.count ++, this.num ++, a = file= null;
    }

    , del : function (span, num) {
    //删除附件
        var file = document.getElementById(this.name + num);
        delete this.urls[file.value];

        document.getElementById(this.form).removeChild(file);
        span.parentNode.parentNode.removeChild(span.parentNode);
        this.count --, span = num = null;
    }

};
</script>
</head>
<body>
<a href="javascript:void(0);" class="files"><input id="file1" name="file1" onchange="File.add(this)" type="file" /></a>
<div id="file"></div>
<hr />
<form id="form" action="b.asp" method="post" enctype="multipart/form-data">
<input type="submit" value="提交" />
</form>
</body>
</html>

posted @ 2009-08-31 10:03 yongbin621 阅读(262) 评论(0) 编辑收藏举报

刷新页面返回顶部

yongbin621

模拟126的附件添加特效

公告