仅显示文件输入中的文本

Question

我正在尝试添加文本以显示用户是否已将图像选择到自定义文件输入中。

目前我有以下带有静态文本的元素：

我将在静态文本下添加一个文本以显示是否选择了文件和文件名。

我只想在文件输入中显示文本。换句话说，我只想隐藏按钮元素，而不是文本。

我认为文件输入的工作方式与所有其他 html 组件不同。

这样做的一种方法是尝试获取显示在右侧和悬停时的文本变量。

Answer 1

$('.form-field-file').each(function(){
  var label = $('label', this);
  var labelValue = $(label).html();
  var fileInput = $('input[type="file"]', this);

  $(fileInput).on('change', function(){
  var fileName = $(this).val().split('\\').pop();

  if (fileName) { 
    $(label).html(fileName);
  } 
  else { 
    $(label).html(labelValue);
  }
   
 });
});

.form-field-file label {
    position: relative;
    display: inline-block;
    width: auto;
    height: 50px;
    padding: 50px 50px;
    background: #aaa;
    color: #000;
    border-radius: 2px;
    font-size: rem(13);
    line-height: 44px;
    font-weight: 700;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.25s ease-in-out;
}
.form-field-file label:hover, .form-field-file label:active {
    background: shade(#336699, 34%);
}
.form-field-file label:after {
    position: absolute;
    top: 0;
    z-index: 2;
    display: block;
    font-family: 'FontAwesome';
}
.form-field-file input[type="file"] {
    position: absolute;
    z-index: -1;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-field form-field-file">
 <label for="file-upload">CHOOSE FILE...</label>
 <input type="file" name="file-upload" id="file-upload"/>
</div>

Answer 2

Here 是一篇方便的文章。

...没有 JavaScript 较少的方式来指示是否选择了任何文件...

有一个技巧可以做到这一点。您可以将文件输入放在自定义输入下方，如下所示：

.inputfile {
  overflow: hidden;
  position: absolute;
  z-index: -1;
  margin-left: 12px;
  outline: none;
}

.inputfile+label {
  background: #DDD;
  cursor: pointer;
  border: 1px solid #AAA;
  outline: none;
  padding: 5px 8px;
}

.inputfile+label:hover {
  box-shadow: 0 0 5px 1px #DDD;
}

.inputfile+label:active {
  box-shadow: 0 0 5px 2px #CCC;
}

.inputfile+label {
  cursor: pointer;
}

.inputfile+label * {
  pointer-events: none;
}

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

或者如果您只想要文本而没有按钮这是一个示例

.inputfileholder {
  overflow: hidden;
  max-width: 200px;
  height: 21px;
  position: relative
}

.inputfileholder .inputfile {
  position: absolute;
  left: -90px;
  outline: none;
}

<div class="inputfileholder">
  <input type="file" name="file" id="file" class="inputfile" />
</div>

inputfileholder 中 inputfile 和 height 的 left 值可能因语言而异。这里只是一个例子。

Answer 3

您可以使用这个简单的东西使用给定的按钮选择文件 下面的例子。

.hide{
display:none;
}

.btn-file{
background:lightblue;
padding:50px;
border:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" class="hide" id="file-btn">
<button type="button" class="btn-file" onclick="$('#file-btn').click()">Upload File</button>