javascript - 文件上传点击事件

Question

这是我的问题。我已经制作了文件上传功能。但是当我点击按钮上传时，会显示选择文件的模式。这没问题，但是在获取文件并单击打开此模式后，再次显示我并在第二次选择后功能结束。

$(document).ready(function() {
  document.getElementById('file_alt').addEventListener('click', function(e) {
    e.preventDefault();
    debugger;
    let file = document.getElementById('file');
    var fileName = $('#fileName');

    file.click();
    $(file).on('change', function(e) {

      let fileText = e.target.files[0].name;
      fileName.val(fileText);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 m-2 mt-4" id="fileForm">
  <input type="file" name="file" value="" id="file" style="display:none" />
  <button name="fileName" id="file_alt" class="btn btn-danger" type="button" value="">Прикачи</button>
  <input type="text" id="fileName" name="FileName" value="" readonly style="border:none" />

  <label for="file"></label>
</div>

Answer 1

也许我没有完全理解你对问题的描述，但我看不到你的演示代码中出现这样的问题。

但是我会建议一些事情来更普遍地改进代码:

1) 在你的语法中保持一致——要么使用 vanilla JS 语法，要么使用 jQuery 语法。将它们混合在一起会使代码更难阅读。我在示例中始终使用 jQuery。

2) 将“change”事件移到“click”事件处理程序之外。当它在单击处理程序中时，这意味着每次单击按钮时，它都会向文件输入添加另一个“更改”事件处理程序。添加新的处理程序不会删除旧的处理程序。这意味着您下次选择文件时，它将运行所有您之前添加的更改处理函数。如果您仔细观察您的代码，您会发现它会很快依次显示所有先前选择的文件的名称，然后再用后面的文件替换它们。这是所有那些函数一个接一个运行的结果。您不需要该函数运行多次，因此如果您在“点击”处理程序之外声明它，它将在页面加载时创建一次事件处理程序。

$(document).ready(function() {
  var file = $('#file');
  $('#file_alt').click(function(e) {
    e.preventDefault();
    file.click();
  });

  $(file).on('change', function(e) {
    let fileText = e.target.files[0].name;
    $('#fileName').val(fileText);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12 m-2 mt-4" id="fileForm">
  <input type="file" name="file" value="" id="file" style="display:none" />
  <button name="fileName" id="file_alt" class="btn btn-danger" type="button" value="">Прикачи</button>
  <input type="text" id="fileName" name="FileName" value="" readonly style="border:none" />

  <label for="file"></label>
</div>