优化文件上传

    

    

    多文件带进度条上传

    

        *{

            font-family: 'microsoft yahei';

            color: #4A4A4A;

        }

        .upload{

            width: 750px;

            padding: 15px;

            border: 1px dashed #ccc;

            margin: 25px auto;

            border-radius: 5px;

        }    

        .uploadBox{

            width: 100%;

            height: 35px;

            /*background: #F0F0F0;*/

            position: relative;

        }

        .uploadBox input{

            height: 30px;

            background: red;

            position: absolute;

            top: 2px;

            left: 0;

            z-index: 201;

            opacity: 0;

            cursor: pointer;

        }

        .uploadBox .inputCover{

            width: 100px;

            height: 30px;

            position: absolute;

            top: 2px;

            left: 0;

            z-index: 200;

            text-align: center;

            line-height: 30px;

            font-size: 14px;

            border: 1px solid #009393;

            border-radius: 5px;

            cursor: pointer;

        }

        .uploadButton{

            width: 100px;

            height: 30px;

            position: absolute;

            left: 65%;

            border-radius: 5px;

            border: 1px solid #ccc;

            background: #F0F0F0;

            outline: none;

            cursor: pointer;

        }

        .uploadButton:hover{

            background: #E0E0E0;

        }

        .processBar{

            display: inline-block;

            width: 0;

            height: 7px;

            position: absolute;

            left: 600px;

            top: 14px;

            background: #009393;

        }

        .processNum{

            position: absolute;

            left: 650px;

            color: #009393;

            font-size: 12px;

            line-height: 35px;

        }

        .delFile{

            width:40px;

            position: absolute;

            left: 715px;

            color: red;

            font-size: 12px;

            height:30px;

            line-height: 30px;

            border-radius: 5px;

            text-align: center;

            border: 1px solid red;

            cursor:pointer;

        }

        .show{

            text-align: center;

            font-size: 14px;

            color: #4A4A4A;

        }

        .fileInfo{

            min-width: 200px;

            height: 30px;

            position: absolute;

            top: 2px;

            margin-left:150px;

            text-align: center;

            line-height: 30px;

            font-size: 14px;

            border-radius: 5px;

        }

        .cancelFile{

            width: 50px;

            height: 30px;

            position: absolute;

            top: 2px;

            margin-left:500px;

            text-align: center;

            line-height: 30px;

            font-size: 14px;

            border: 1px solid red;

            color:red;

            border-radius: 5px;

            text-decoration:none;

            display:none;

        }

        .addFile{

            width: 80px;

            height: 30px;

            position: relative;

            margin-bottom:15px;

            left: 66%;

            border-radius: 5px;

            border: 1px solid #afdfd0;

            text-align: center;

            line-height:30px;

            color:#00bb80;

            background: #e8f8f3;

            font-size:14px;

            cursor:pointer;

        }

    

    添加文件

    

        

            选择文件

            

            取消

            

                

            

            

            未选择文件

        

    

    上传

    

你可能感兴趣的:(优化文件上传)