上传图片自定义样式.gif

HTML部分

  1. <div class="upload">
  2.     <div class="upload-icon">
  3.         <input type="file" id="inputFile" accept="image/gif, image/jpeg" style="display: none;" οnchange="changeAgentContent()">
  4.         <input type="text" value="" disabled style="display: none;" id="inputFileAgent" />
  5.         <input type="button" class="upload-input" id="upload" value="Browse..." />
  6.         <img src="../imgs/camera.png" alt="" class="img">
  7.     </div>
  8.     <div class="upload-title">上传照片</div>
  9. </div>

CSS部分

  1. .upload {
  2.     position: relative;
  3.     margin-top: 4.67vw;
  4.     display: flex;
  5.     flex-direction: row;
  6.     justify-content: flex-start;
  7.     align-items: center;
  8.     .upload-icon {
  9.         width: 13.33vw;
  10.         height: 13.33vw;
  11.         background-color: #ffffff;
  12.         box-shadow: 0vw 0.4vw 1.33vw 0vw 
  13.             rgba(0, 0, 0, 0.1);
  14.         border-radius: 0.53vw;
  15.         overflow: hidden;
  16.         line-height: 0;
  17.         border: solid 0.27vw #e2e2e2;
  18.         box-sizing: border-box;
  19.         padding: 4vw 3.6vw;
  20.         margin-right: 4vw;
  21.         .upload-input {
  22.             position: absolute;
  23.             display: block;
  24.             width: 13.33vw;
  25.             height: 13.33vw;
  26.             background-color: transparent;
  27.             top: 0;
  28.             left: 0;
  29.             z-index: 1;
  30.             outline: none;
  31.             border: none;
  32.         }
  33.     }
  34.     .upload-title {
  35.         font-size: 3.73vw;
  36.         color: #999999;
  37.     }
  38. }

JS部分

  1. document.getElementById('upload').onclick = function() {
  2.   document.getElementById('inputFile').click()
  3. }
  4. function changeAgentContent(){
  5.   document.getElementById("inputFileAgent").value = document.getElementById("inputFile").value;
  6. }