【问题标题】:How do I style a File Upload button [duplicate]如何设置文件上传按钮的样式[重复]
【发布时间】:2018-06-07 00:51:40
【问题描述】:

我有一个需要归档的文件上传按钮。我目前默认使用一些预设样式。

<form class="uploadButton" method="POST" action="upload.php" enctype="multipart/form-data">
  <input type="file" name="file[]" multiple>
</form>

【问题讨论】:

标签: javascript html css


【解决方案1】:

你可以试试下面的代码

$('input[type="file"]').on('change', function() {
  $('input[type="text"]').val($(this).val());
});
$('span').on('click', function() {
  $('input[type="text"]').val($('input[type="file"]').val());
});
form.uploadButton {
  position: relative;
  display: flex;
}

input[type="text"] {
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #ccc;
  margin-right: 5px;
}

span {
  background: red;
  border: 0;
  color: #fff;
  padding: 0 20px;
  width: 80px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

input[type="file"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="uploadButton" method="" action="" enctype="multipart/form-data">
  <input type="text">
  <span>Browse</span>
  <input type="file" name="file[]" multiple>
</form>

【讨论】:

  • 我不断收到 404 - 找不到文件或目录。您要查找的资源可能已被删除、名称已更改或暂时不可用。
  • @insivika 更新了答案
【解决方案2】:

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
<form class="uploadButton" method="POST" action="upload.php" enctype="multipart/form-data">
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
  </label>
  <input id="file-upload" type="file" name="file[]" multiple/>
</form>

【讨论】:

  • 很好,但我无法查看已上传的文件。
  • 确定。我会做的
  • 是的,请将该功能添加到代码中以使其完美。谢谢!!
【解决方案3】:

function myFunction(){
    var x = document.getElementById("myFile");
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "";
        } else {
            for (var i = 0; i < x.files.length; i++) {
                txt += "<br><strong>" + (i+1) + ". file</strong><br>";
                var file = x.files[i];
                if ('name' in file) {
                    txt += "Name: " + file.name + "<br>";
                }
                if ('size' in file) {
                    txt += "Size: " + file.size + " bytes <br>";
                }
            }
        }
    } 
    else {
        if (x.value == "") {
            txt += "Select one or more files.";
        } else {
            txt += "The files property is not supported by your browser!";
            txt  += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. 
        }
    }
    document.getElementById("demo").innerHTML = txt;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
::-webkit-file-upload-button {
  background: black;
  color: red;
  padding: 0.5em;
}
<body onload="myFunction()">
  <input type="file" id="myFile" class="custom-file-upload" multiple size="50" onchange="myFunction()">
  <p id="demo"></p>
</body>

【讨论】:

    【解决方案4】:

    试试这个。

    'use strict';
    
    ;( function ( document, window, index )
    {
      var inputs = document.querySelectorAll( '.inputfile' );
      Array.prototype.forEach.call( inputs, function( input )
      {
        var label = input.nextElementSibling,
        labelVal = label.innerHTML;
    
        input.addEventListener( 'change', function( e )
        {
          var fileName = '';
          if( this.files && this.files.length > 1 )
            fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
          else
            fileName = e.target.value.split( '\\' ).pop();
    
          if( fileName )
            label.querySelector( 'span' ).innerHTML = fileName;
          else
            label.innerHTML = labelVal;
        });
    
        // Firefox bug fix
        input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
        input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
      });
    }( document, window, 0 ));
    input[type="file"] {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      font-size: 1px;
      cursor: pointer;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    
    .inputfile + label span {
      width: 200px;
      min-height: 18px;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      vertical-align: top;
      border: 1px solid #ccc;
    }
    
    .inputfile + label strong {
      height: 100%;
      color: #fff;
      background-color: #d3394c;
      display: inline-block;
    }
    
    .inputfile + label span,
    .inputfile + label strong {
      padding: 10px;
    }
    .inputfile + label svg {
      width: 1em;
      height: 1em;
      vertical-align: middle;
      fill: currentColor;
      margin-top: -0.25em;
      margin-right: 0.25em;
    }
    
    .box {
      position: relative;
    }
    <div class="box">
        <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />
        <label for="file"><span></span> <strong><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> Choose a file&hellip;</strong></label>
    </div>

    【讨论】:

      【解决方案5】:

      function myFunction(){
          var x = document.getElementById("myFile");
          var txt = "";
          if ('files' in x) {
              if (x.files.length == 0) {
                  txt = "";
              } else {
                  for (var i = 0; i < x.files.length; i++) {
                      txt += "<br><strong>" + (i+1) + ". file</strong><br>";
                      var file = x.files[i];
                      if ('name' in file) {
                          txt += "Name: " + file.name + "<br>";
                      }
                      if ('size' in file) {
                          txt += "Size: " + file.size + " bytes <br>";
                      }
                  }
              }
          } 
          else {
              if (x.value == "") {
                  txt += "Select one or more files.";
              } else {
                  txt += "The files property is not supported by your browser!";
                  txt  += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead. 
              }
          }
          document.getElementById("demo").innerHTML = txt;
      }
      .custom-file-upload {
          border: 1px solid #ccc;
          display: inline-block;
          padding: 6px 12px;
          cursor: pointer;
      }
      <body onload="myFunction()">
        <input type="file" id="myFile" class="custom-file-upload" multiple size="50" onchange="myFunction()">
        <p id="demo"></p>
      </body>

      【讨论】:

      • 现在知道 CSS 是在设​​置背景的样式,而不是按钮本身...
      • 我希望你能做到
      • 好吧,这就是这个问题的全部意义......
      • 我不需要 javascript。我目前使用的代码在它旁边显示上传的文档名称,没有使用java脚本...
      【解决方案6】:

      试试这样的。

      document.getElementById("file-upload").addEventListener("change", function() {
      var fullPath = document.getElementById("file-upload").value
      var filename = fullPath.replace(/^.*[\\\/]/, '')
        document.getElementById("status").innerHTML = filename;
      });
      .file-upload {
        opacity: 0;
        position: absolute;
        top:0;
        left:0;
        height:75px;
        width:100%;
        border: 1px solid red;
      }
      .file-container {
        position:relative;
      }
      .custom-file-upload {
        position: absolute;
        top:0;
        left:0;
      }
      #status {
        font-size: 25px;
        color:red;
        font-weight: bold;
      }
      <div class="file-container">
          <div class="custom-file-upload">
          Put fancy <img src="https://cdn3.iconfinder.com/data/icons/badger-s-christmas/300/stocking-32.png" /> stuff here <img src="https://cdn3.iconfinder.com/data/icons/badger-s-christmas/300/bells-48.png" /> (click me)
          <input type="file" class="file-upload" id="file-upload" />
          </div>
      </div><br /><br /><br /><p id="status"></p>

      【讨论】:

        【解决方案7】:

        第 1 步。创建一个简单的 html 标记

        <div class="fileUpload btn btn-primary">
            <span>Upload</span>
            <input type="file" class="upload" />
        </div>
        

        第 2 步。CSS:棘手的部分

        .fileUpload {
            position: relative;
            overflow: hidden;
            margin: 10px;
        }
        
        .fileUpload input.upload {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
        }
        

        【讨论】:

        • 您的回答非常棒,但是我应该在哪里放置 name="file[]" 才能不失去查看已上传文件的能力?
        猜你喜欢
        • 1970-01-01
        • 2014-04-05
        • 1970-01-01
        • 1970-01-01
        • 2020-08-16
        • 1970-01-01
        • 1970-01-01
        • 2020-07-17
        • 2015-10-03
        相关资源
        最近更新 更多