文件附件上传

CSS样式

<style type="text/css">
    /*附件 开始*/
    a.files, span.del_file
    {
        overflow: hidden;
        display: inline-block;
        background: url('F2.gif');
    }
    a.files
    {
         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
    {
         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！