文件附件上传
CSS样式
<style type="text/css"> /*附件 开始*/ a.files, span.del_file { overflow: hidden; display: inline-block; background: url('F2.gif'); } a.files { width: 50px; height: 15px; vertical-align: middle; } a.files:hover { background-position: 0 -24px; cursor: hand; } a.files input { margin-left: -160px; filter: alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; } span.del_file { width: 9px; height: 7px; background-position: 0 -51px; vertical-align: middle; margin-left: 2px; cursor: hand; } #file a { color: #000000; } /*附件 结束*/ </style>
Javascript:
<script type="text/javascript">
var File = {
/*
上传文件JS代码
-------------------------------------------------------
**num
为元素的下标
**count
为元素的个数
**name
为元素的名字和ID的前段(元素的实际名称是前段加下标)
**status
为状态的ID
**form
为表单的ID
-------------------------------------------------------
*/
num: 1, count: 0
, name: 'file', status: 'file', form: 'form'
, urls: {}
, suffix: ['jpg', 'bmp', 'gif', 'png', 'jpeg', 'pdf', 'chm', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt']//允许的后缀名
, add: function(file) {
//添加附件
if (this.urls[file.value]) {
//alert(file.value);
alert('此文件已存在');
return false;
}
var suf = (/[^\.]+$/.exec(file.value)).toString().toLowerCase(); //获取上传文件后缀名
for (var i = 0; i < this.suffix.length; i++) {
if (this.suffix[i] == suf)//为允许上传的文件类型时
{
//alert(file.value);
var a = file.parentNode;
var 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>;<br><\/span>'
this.count++, this.num++, a = file = null;
return;
}
}
alert("不允许上传此类文件!\n\r允许上传的附件类型为:\n\r" + this.suffix.toString());
},
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>
body中的代码:
<form id="form" method="post" enctype="multipart/form-data">
<a href="javascript:void(0);" class="files"><input id="file1" name="file1" onchange="File.add(this)" type="file" /></a>
<div id="file"></div>
</form>
css样式中的F2图片:
最后要记得把form加上 enctype="multipart/form-data" 属性,上传动作一定要是POST!