如何使用 jquery 显示自定义样式输入文件的文件名?

新手上路,请多包涵

我使用 CSS 设置了文件输入的样式:

 .custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
 <form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

一切正常,但我想显示选定的文件名。这怎么可能使用 CSS 或 jQuery?

原文由 amM 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 414
2 个回答

您必须在 [type=file] 元素上绑定并触发更改事件,并将文件名读取为:

 $('#file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#file-upload')[0].files[0].name;
  $(this).prev('label').text(file);
});
 .custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

原文由 Jai 发布,翻译遵循 CC BY-SA 4.0 许可协议

您需要在输入更改时获取文件名并将其插入到 html 中。在代码中 this.files[0].name 获取所选文件的名称。

 $("#file-upload").change(function(){
  $("#file-name").text(this.files[0].name);
});

 $("#file-upload").change(function(){
  $("#file-name").text(this.files[0].name);
});
 .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="file-upload" class="custom-file-upload">
        <i class="fa fa-cloud-upload"></i> Upload Image
    </label>
    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
    <label id="file-name"></label>
</form>

您也可以使用 纯 javascript 来完成这项工作

document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = this.files[0].name;
}

 document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = this.files[0].name;
}
 .custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
 <form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
  <label id="file-name"></label>
</form>

原文由 Mohammad 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题