Question

我有输入类型文件的自定义CSS。这工作正常，但每当我选择任何文件时，其名称都没有显示，有任何建议或任何帮助吗？

.fileContainer {
  overflow: hidden;
  position: relative;
}

.fileContainer [type=file] {
  cursor: inherit;
  display: block;
  font-size: 999px;
  filter: alpha(opacity=0);
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}


/* Example stylistic flourishes */

.fileContainer {
  background: #049fd9;
  color: #ffffff;
  border-radius: 30px;
  padding: .5em;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  font-size: 0.875rem;
  height: 30px;
  vertical-align: middle;
  min-width: 100px;
  max-width: 200px;
}

.fileContainer [type=file] {
  cursor: pointer;
}

<label class="fileContainer">
  Choose file
  <input type="file"/>
</label>

Answer 1

要实现这一点，首先需要向DOM添加一个元素来存储文件名。然后，您可以遍历输入的files集合，并将文件名附加到该元素。试试这个：

$('input').change(function() {
  var html = '';
  for (var i = 0; i < this.files.length; i++) {
    html += '<p>' + this.files[i].name + '</p>';
  }
  $('#filelist').html(html);
});

.fileContainer {
  overflow: hidden;
  position: relative;
}

.fileContainer [type=file] {
  cursor: inherit;
  display: block;
  font-size: 999px;
  filter: alpha(opacity=0);
  min-height: 100%;
  min-width: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
}

.fileContainer {
  background: #049fd9;
  color: #ffffff;
  border-radius: 30px;
  padding: .5em;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  font-size: 0.875rem;
  height: 30px;
  vertical-align: middle;
  min-width: 100px;
  max-width: 200px;
}

.fileContainer [type=file] {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="fileContainer">
  Choose file
  <input type="file"/>
</label>

<div id="filelist"></div>

Answer 2

您可以使用此代码

$("input[type=file]").change(function() {
$(".fileContainer").text($('input[type=file]').val().replace(/C:\\fakepath\\/i, ''))
})

演示：

$("input[type=file]").change(function() {
$(".fileContainer").text($('input[type=file]').val().replace(/C:\\fakepath\\/i, ''))

})

.fileContainer {
    overflow: hidden;
    position: relative;
    
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}

/* Example stylistic flourishes */

.fileContainer {
  
    background: #049fd9;
    color: #ffffff;
    border-radius: 30px;
    padding: .5em;
    
    padding-left: 20px;
    padding-right: 20px;
        text-align: center;
    font-size: 0.875rem;
   height:30px;
    vertical-align: middle;
    min-width: 100px;
    max-width: 200px;
}

.fileContainer [type=file] {
    cursor: pointer;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="fileContainer">
    Choose file
    <input type="file"/>
</label>

未显示所选文件名

2 个答案: