如何设置“文件上载”按钮的样式

时间：2017-12-26 05:24:23

标签： javascript html css

我有一个文件上传按钮，我需要提交。我目前默认使用一些预先设定的样式。

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

7 个答案:

答案 0 :(得分：4)

您可以尝试以下代码

＆＃13;
＆＃13; 
$('input[type="file"]').on('change', function() {
  $('input[type="text"]').val($(this).val());
});
$('span').on('click', function() {
  $('input[type="text"]').val($('input[type="file"]').val());
});
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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>

答案 2 :(得分：0)

步骤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);
}

答案 3 :(得分：0)

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>

答案 4 :(得分：0)

试试这个。

＆＃13;
＆＃13; 
'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 ));
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

尝试这样的事情。

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>

答案 6 :(得分：0)

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>

相关问题
最新问题