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下存在使用伪路径的问题。这是最后一个版本。 https://jsfiddle.net/qpo8dwf9/49/

Answer 2

这是获取上传文件名称的一些示例

    $(document).ready(function(){

        $('input[type="file"]').change(function(e){

            var fileName = e.target.files[0].name; //getting the file name 
            var display = $("#select_file"); //where to display
            display.html(fileName);

        });

    });

我希望这会对你有所帮助:)。

使用Jquery获取文件名

2 个答案: