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）语法保持一致-使用普通JS语法或jQuery语法。将它们混合在一起会使代码更难阅读。我在示例中一直使用jQuery。

2）将“更改”事件移到“单击”事件处理程序之外。当它位于单击处理程序内部时，这意味着每次单击按钮时，它将向文件输入添加另一个“更改”事件处理程序。添加新的处理程序不会删除较旧的处理程序。这意味着您下次选择文件时，它将运行 all 您先前添加的变更处理程序功能。如果仔细观察代码，您会很快看到它依次显示所有先前选择的文件的名称，然后再用以后的文件替换它们。这是所有这些功能一个接一个运行的结果。您不需要该函数运行一次以上，因此，如果在“ 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>

文件上传点击事件

1 个答案: