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

矫情吗；* 2023-06-14 10:52 2阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70][]

![20191119152718881.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70 3][]

## 进度条样式 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70 4][]

## **.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;** ##

## **        \}** ##

## **      \}** ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111915254959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0,size_16,color_FFFFFF,t_70
[20191119152718881.png]: https://img-blog.csdnimg.cn/20191119152718881.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191119153404206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191119153530276.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191119153913418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191119154345428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0,size_16,color_FFFFFF,t_70