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