javascript - 使用Jquery获取文件名

Question

我想获取我上传的文件名并将其显示在我的 <span> 中。 这是我的代码:

var filename = $('#image_file').val();
$('#select_file').html(filename);

<div class="container-input-custom">
   <div class="upload-btn">
      <span id="select_file"></span>
      <label for="file-upload"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></label>
      <input type="file" id="image_file">
   </div>
</div>

Answer 1

这是一些简单的例子。我希望这对您有帮助:

$(document).ready(function() {
  $("#image_file").on("change", function() {
     $("#select_file").html(this.value);
  });
});

编辑: 直到现在我才意识到问题是什么。 所以这是代码:

$(".upload-btn").one("click", function _handler(event) {
        _handler.oldContext = this;
        var _file = $(this).find("input[type='file']").one("change", function() {
        var oldContext =    $(_handler.oldContext);
            oldContext.find("span#select_file").html(this.value);
        $(this).attr("display", "none"); 
        oldContext.one("click", _handler); 
    });
    _file.attr("display","block").trigger("click");
    event.stopPropagation();
});

这是 jsfiddle 的工作:

https://jsfiddle.net/qpo8dwf9/33/

Edit2:这是具有两个输入的工作示例，并在文档上附加监听器。

https://jsfiddle.net/qpo8dwf9/38/

Edit3:Chrome 和 Chromium 下的 fakepath 存在问题。这是最后一个版本。 https://jsfiddle.net/qpo8dwf9/49/