javascript - 文件被存储几次而不是一次

Question

当我上传文件时，它会存储 X 次，其中 X 是您上传文件的时间。如果我尝试连续上传 3 次，它将存储一个文件、两个文件、三个文件，总共 6 个文件。

为什么会发生这种情况？

$(function() {
  $("#uploadButton").on('click', function() {
    const job_id = $(this).attr("data-item");

    $("#cvForm").submit(function(e) {
      e.preventDefault();

      var form_data = new FormData(document.getElementById("cvForm"));

      axios({
        method: 'post',
        url: '/job/apply/' + job_id,
        data: form_data,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(function(response) {
        console.log(response);
      }).catch(function(response) {
        console.log(response);
      });

      return false;
    });
  });
});

表格为:

<div class="modal fade" id="CVModalUpload" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="cvForm" name="cv" method="post" action="{{ path('student_candidate', {'id':job.id}) }}" enctype="multipart/form-data">
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" name="cv[file]" class="custom-file-input" id="uploadGroup" aria-describedby="uploadButton">
                            <label class="custom-file-label" for="uploadGroup">Choose CV</label>
                        </div>
                        <div class="input-group-append">
                            <button type="submit" name="cv[send]" class="btn btn btn-primary shadow rounded-0" id="uploadButton" data-item="{{ job.id }}">Upload CV</button>
                        </div>
                    </div>
                    {{ form_row(form._token) }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

问题是因为您正在嵌套事件处理程序。要解决此问题，请在 click() 之外移动 submit()。

也就是说，现在您已将 HTML 添加到问题中，我可以看到您根本不需要 click 处理程序。提交表单时，您只需从按钮读取data-item即可。试试这个:

jQuery(function($) {
  $("#cvForm").submit(function(e) {
    e.preventDefault();

    let form_data = new FormData(this); // note 'this' here
    let job_id = $('#uploadButton').data('item'); // note 'data()' here

    axios({
      method: 'post',
      url: '/job/apply/' + job_id,
      data: form_data,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(function(response) {
      console.log(response);
    }).catch(function(response) {
      console.log(response);
    });
  });
});