html - 更改输入类型 ="file"中的默认文本？

Question

当我们使用input="file"时，我想更改按钮上的默认文本“选择文件”。

我该怎么做？正如您在图像中看到的，按钮位于文本的左侧。如何将其放在文本右侧？

Answer 1

使用for input 的 label 属性。

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

下面是获取上传文件名称的代码

<小时/>

$("#files").change(function() {
  filename = this.files[0].name;
  console.log(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label for="files" class="btn">Select Image</label>
    <input id="files" style="visibility:hidden;" type="file">
</div>