仿gmail添加附件的页面，可提交
[原创 2006-05-29 13:48:52]
Gmail添加附件的效果，隐藏文件域。以下是代码：
<html>
<head>
<style type="text/css">
#upload{
TEXT-ALIGN: left;BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 6em; PADDING-LEFT: 15px; BACKGROUND: #f1f3f5; PADDING-BOTTOM: 15px; MARGIN-LEFT: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 430px; MARGIN-RIGHT: auto; PADDING-TOP: 15px; BORDER-BOTTOM: #cccccc 1px solid;font-size:12px;
}
#ctrl{TEXT-ALIGN: center;}
</style>
<title>
仿google的上传附件效果
</title>
<script>
function $(pKey){
return document.getElementById(pKey);
}
function add_file(){
var div = document.createElement('div');
var temp = document.createElement('input');
$("test_form").appendChild(div);
temp.setAttribute('id','temp_file'+$("test_form").children.length);
temp.setAttribute('type','file');
temp.style.display='none';
temp.onchange=function(){div.innerHTML += "<li>"+temp.value+" <span onclick='delete_file(this.parentElement.parentElement);' style='cursor:hand;color:blue;'>删除</span></li>";};
div.appendChild(temp);
temp.click();
}
function delete_file(pNode){
$("test_form").removeChild(pNode);
}
</script>
<noscript>您的浏览器不支持JavaScript。</noscript>
</head>
<body>
<div id="ctrl">
<div id="upload">
<form action="" method="POST" enctype="multipart/form-data" name="test_form">
</form>
<br/>
<a href="javascript:add_file();">添加文件</a>
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
#upload{
TEXT-ALIGN: left;BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 6em; PADDING-LEFT: 15px; BACKGROUND: #f1f3f5; PADDING-BOTTOM: 15px; MARGIN-LEFT: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 430px; MARGIN-RIGHT: auto; PADDING-TOP: 15px; BORDER-BOTTOM: #cccccc 1px solid;font-size:12px;
}
#ctrl{TEXT-ALIGN: center;}
</style>
<title>
仿google的上传附件效果
</title>
<script>
function $(pKey){
return document.getElementById(pKey);
}
function add_file(){
var div = document.createElement('div');
var temp = document.createElement('input');
$("test_form").appendChild(div);
temp.setAttribute('id','temp_file'+$("test_form").children.length);
temp.setAttribute('type','file');
temp.style.display='none';
temp.onchange=function(){div.innerHTML += "<li>"+temp.value+" <span onclick='delete_file(this.parentElement.parentElement);' style='cursor:hand;color:blue;'>删除</span></li>";};
div.appendChild(temp);
temp.click();
}
function delete_file(pNode){
$("test_form").removeChild(pNode);
}
</script>
<noscript>您的浏览器不支持JavaScript。</noscript>
</head>
<body>
<div id="ctrl">
<div id="upload">
<form action="" method="POST" enctype="multipart/form-data" name="test_form">
</form>
<br/>
<a href="javascript:add_file();">添加文件</a>
</div>
</div>
</body>
</html>
感谢沈冬明的帮助
一个发现：a对象德this指代的是href
标签: 技术笔记 
本文章引用通告地址(TrackBack Ping URL)为: 
本文章尚未被引用。
下一篇: [转]另类解析天蝎座
上一篇: DOM小笔记