真实文件上传进度条以及实现上传多次同一张图片不生效的解决方案

 

 

进度条样式

 

 

.box {

        width: 100%;

        height: 100%;

        position: fixed;

        z-index: 1000;

        top: 0;

        left: 0;

        background: rgba(0, 0, 0, 0.3);

        .box-inner {

          margin-left: 50%;    

          transform: translateX(-50%);

          display: inline-block;

          margin-top: 20%;

        }

        .progress-wrapper { 

            position: relative;

            width: 800px;

            height: 30px;

            border-radius: 5px;

            background-color: lightgrey; }

        .progress-wrapper .progress-progress {

             position: absolute; 

             left: 0; top: 0; 

             height: 100%; 

             width: 0%; 

             border-radius: 5px; 

             background-color: #78A5FA; 

             z-index: 1; 

        }

        .progress-wrapper .progress-rate { 

            position: relative;

            text-align: center; 

            font-size: 14px; 

            line-height: 30px; 

            height: 100%; 

            z-index:2;

        }

      }