打印带有表格数量的文件名

Question

我在页面上有多个表单，每个表单都有一个文件输入。当用户选择文件时，我想在相关表单内的<span class="fileNameBox"></span>中打印所选文件的名称。

为什么它总是以第一种形式/ class =“fileNameBox”打印文件的名称 ？

JS：

<script>
    $(function() {
      $('input.file-field').on('change', function(e) {
        var files = this.files,
            filename = files[0].name;
        $(this).closest('form').find('.fileNameBox').html(filename);
      });
    });
</script>

HTML：

<form class="form-horizontal" action='#' method="post"  enctype="multipart/form-data">
    <div class="form-group">
        <div class="col-md-8 col-xs-12">
            <textarea class="form-control comment-field" name="comment[text]" rows="1" ></textarea>
            <span class="fileNameBox"></span>
            <input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' id="uploadFile"/>
        </div>

        <label class="col-md-1 col-xs-1 control-label" for="uploadFile">
            <img src="images/photoIconOn.png" alt="" class="uploadFileImg"/>
        </label>
    </div>                      
    <div class="form-group">
        <label class="col-xs-2 control-label" for="textinput"></label>  
        <div class="col-md-8 col-xs-12">
            <button class="btn btn-primary submit" >SEND</button>
        </div>
    </div>                                      
</form>

<form class="form-horizontal" action='#' method="post"  enctype="multipart/form-data">
    <div class="form-group">
        <div class="col-md-8 col-xs-12">
            <textarea class="form-control comment-field" name="comment[text]" rows="1" ></textarea>
            <span class="fileNameBox"></span>
            <input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' id="uploadFile"/>
        </div>

        <label class="col-md-1 col-xs-1 control-label" for="uploadFile">
            <img src="images/photoIconOn.png" alt="" class="uploadFileImg"/>
        </label>
    </div>                      
    <div class="form-group">
        <label class="col-xs-2 control-label" for="textinput"></label>  
        <div class="col-md-8 col-xs-12">
            <button class="btn btn-primary submit" >SEND</button>
        </div>
    </div>                                      
</form>