Question

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

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

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

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

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

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

Answer 1

＆＃13;

$('.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);
  }
   
 });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

Here是一篇方便的文章。

...没有无JavaScript的方法来指示是否选择了任何文件......

虽然可以做到这一点。您可以将文件输入放在自定义输入下面，如下所示：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

或者如果您只想要文字而没有按钮这里是一个例子

＆＃13;

.inputfileholder {
  overflow: hidden;
  max-width: 200px;
  height: 21px;
  position: relative
}

.inputfileholder .inputfile {
  position: absolute;
  left: -90px;
  outline: none;
}

＆＃13;

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

＆＃13;

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

Answer 3

您可以使用此简单资料选择使用按钮的文件下面的例子。

＆＃13;

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

＆＃13;

<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>

＆＃13;

仅显示文件输入中的文本

3 个答案: