用javascript获取选定的文件名

Question

我想在JavaScript输入的文件中显示选定的文件名，但不确定如何显示

我要更改for的文件名

代码

No file selected

我应该更改我的代码吗？

更新

<div class="upload-info mt-2"><strong>Attachment</strong> <span>Max. file size: 3MB</span></div>
<div class="clearfix"></div>

<label class="upload-btn">
  {{Form::file('attachment', array('id' => 'attachment'))}}
  <i class="fa fa-upload"></i> Browse
</label>
<span class="fake-input">No file selected</span>

<script>
    $(document).ready(function() {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#fake-input').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#attachment").change(function(){
            readURL(this);
        });
    });
</script>

错误

获取<label class="upload-btn"> {{Form::file('attachment', array('id' => 'attachment'))}} <i class="fa fa-upload"></i> Browse </label> <span class="fake-input">No file selectedspan</span> <span id="fake-input"></span> <script> $(document).ready(function() { function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('.fake-input').hide(); $('#fake-input').append(e.target.result).show(); } reader.readAsDataURL(input.files[0]); } } $("#attachment").change(function(){ readURL(this); $('#fake-input').hide(); }); }); </script> 而不是文件名

Answer 1

已解决

感谢所有发表评论并帮助我意识到错误的人，这里是有需要的人的最新编辑（工作代码）。

  

PS：我评论了一些我认为值得关注的部分。

script

<script>
    $(document).ready(function() {
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.fake-input').hide(); // hiding default text (image above)
                    $('#fake-input').append(input.files[0].name).show(); //replace with name of file
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#attachment").change(function(){
            readURL(this);
            $('#fake-input').empty(); // avoid of duplicate when file changes
        });
    });
</script>

html

<label class="upload-btn">
  {{Form::file('attachment', array('id' => 'attachment'))}}
  <i class="fa fa-upload"></i> Browse
</label>
<span class="fake-input">No file selectedspan</span>
<span id="fake-input" class="fake-input"></span> //display none by css