如何设置文件上传按钮的样式[重复]答案

【问题标题】：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>

【问题讨论】：

我添加了“uploadButton”类，但它没有设置按钮本身的样式..
你写过uploadButton类的css吗？
设置常规 html button 的样式，并在用户单击按钮时使用 javascript 触发文件上传对话框。 stackoverflow.com/questions/793014/jquery-trigger-file-input

标签： 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[]" 才能不失去查看已上传文件的能力？