zoukankan      html  css  js  c++  java
  • 文件附件上传

    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图片:

    F2

    最后要记得把form加上 enctype="multipart/form-data" 属性,上传动作一定要是POST!

  • 相关阅读:
    《Java程序性能优化》之设计优化
    使用Java内存映射(Memory-Mapped Files)处理大文件
    创建型模式之Singleton模式
    Web服务器原理及简单实现
    Web性能测试中的几个关键指标
    SELECT的解析顺序及慢查询优化
    从几个方向进行Web渗透测试
    使用C# (.NET Core) 实现观察者模式 (Observer Pattern) 并介绍 delegate 和 event
    RxJS -- Subscription
    ASP.Net Core项目在Mac上使用Entity Framework Core 2.0进行迁移可能会遇到的一个问题.
  • 原文地址:https://www.cnblogs.com/poissonnotes/p/1679749.html
Copyright © 2011-2022 走看看