Question

我选择了文件输入代码，我需要更改选择文件的文本，并且应该有一个必需的关键字，这工作正常，但我想在按钮下方显示所选文件。这是fiddle 这是我的代码：

<form>
 <div>
  upload
  <input type="file" class="hide_file" required>
 </div>
 <br><br>
 <button type="submit" id="save" class="btn btn-default wf-save" >SAVE</button>
</form>

的CSS：

div{
  padding:5px 10px;
  background:#00ad2d;
  border:1px solid #00ad2d;
  position:relative;
  color:#fff;
  border-radius:2px;
  text-align:center;
  float:left;
  cursor:pointer
}
.hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;

}

如何在上传按钮下方显示文件名。任何人都建议如何操作。

Answer 1

实际上，它就在那里。它只是因为你的CSS而被隐藏了。您可以创建一个新元素，然后它将保存文件名。

＆＃13;

$('.hide_file').change(function() {
  var filename = $(this).val();
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  $('#filename').text(filename);
});

＆＃13;

div {
  padding: 5px 10px;
  background: #00ad2d;
  border: 1px solid #00ad2d;
  position: relative;
  color: #fff;
  border-radius: 2px;
  text-align: center;
  float: left;
  cursor: pointer
}

.hide_file {
  position: absolute;
  z-index: 1000;
  opacity: 0;
  cursor: pointer;
  right: 0;
  top: 0;
  height: 100%;
  font-size: 24px;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    upload
    <input type="file" class="hide_file" required value="">

  </div>
  
  <br><br>
  <button type="submit" id="save" class="btn btn-default wf-save">SAVE</button>

</form>
<p id="filename"></p>

＆＃13;

Reference from here.

选择的文件名未显示

1 个答案: