多个单独图片进行上传，并预览-白红宇

多个单独图片进行上传，并预览

阅读量：6757 次

发布时间：2019-06-26

本文共 2085 字，大约阅读时间需要 6 分钟。

想要达到的效果图：（有多个单独的图片进行添加并预览，统一上传）

css:

.message {
      background-color: #fff;     margin-top: 0.26rem;     padding: 0.3rem; } .message p {
      color: #e96969;     font-size: 0.48rem;     margin: 0.4rem 0;     padding-left: 0.78rem;     position: relative; } .message p span {
      font-size: 0.36rem; } .message p em {
      display: inline-block;     width: 0.12rem;     height: 0.48rem;     border-radius: 0.1rem;     background-color: #e96969;     position: absolute;     left: 0.28rem;     top: 0.12rem; } .message ul li {
      margin: 0 auto;     width: 8.7rem;     padding: 0.38rem 0;     background-color: #eee;     position: relative;     text-align: center;     border-radius: 0.2rem;     margin-bottom: 0.44rem; } .message ul li img {
      margin: 0.13rem 0 0.525rem 0 ;     width: 5.4rem;     height: 2.8rem; } .message ul li div {
      font-size: 0.36rem;     color: #666; } .message ul li div span {
      color: #e53a3a; } .message ul li input {
      width: 100%;     height: 100%;     position: absolute;     left: 0;     top: 0;     background-color: red;     opacity: 0; } .message .footer {
      padding: 0.3rem;     width: 100%;     border-top: 0.02rem solid #ccc;     position: fixed;     bottom: 0;     left: 0;     background-color: #fff; } .message .footer button {
      color: #fff;     font-size: 0.48rem;     height: 1.32rem;     width: 100%;     background: url(../images/footer.png) no-repeat;     background-size: cover;     background-position: center center;     line-height: 1.32rem;     text-align: center;     border: 0;     outline: 0;     border-radius: 0.1rem; }

html:


         
     证件上传（请上传个人真实证件）
     
              
                                             
       
        点击上传身份证
        人像面照片
       
         
         
                                             
       
        点击上传身份证
        国徽面照片
       
         
         
                                             
       
        点击上传身份证
        手持身份证照片
       
         
     
     
     
              
           
     
 
    
 js: