Question

问题：首次加载页面时文件上传效果很好，但是当我第二次点击提交上传另一个文件（没有重新加载页面）时，上传会重复两次。通常，上载过程作为后续步骤的次数重复（第一次一次，第二次两次，依此类推）。我不知道为什么它一遍又一遍地重复代码。请帮忙。感谢。

这是我的javascript和html文件。

＆＃13;

function upload() {
  $('#myForm').submit(function(e) {
    $.ajax({
      url: '/website/index.php/library_controller/upload',
      type: 'POST',
      data: new FormData(this),
      processData: false,
      contentType: false,
      success: function(result) {
        alert(result);
        var form = document.getElementById("myForm");
        form.reset();
      }
    });
    e.preventDefault();
  });
}

＆＃13;

<form id="myForm">
  <input id="inputFile" name="userfile[]" size="20" multiple="true" type="file" value="Browse" class="btn btn-primary" style="display:inline;margin:10px"></input>
  <button class="btn btn-primary" onClick="upload()">Upload a new non-image file</button>
</form>

＆＃13;

Answer 1

问题是，每次单击提交按钮时，您都绑定了一个提交处理程序，您必须只绑定一次，在文档就绪时这样做是个好地方。您可以删除点击处理程序。

$(document).ready(function(){
  $('#myForm').submit(function(e) {
    $.ajax({
      url: '/website/index.php/library_controller/upload',
      type: 'POST',
      data: new FormData(this),
      processData: false,
      contentType: false,
      success: function(result) {
        alert(result);
        var form = document.getElementById("myForm");
        form.reset();
      }
    });
    e.preventDefault();
  });
}

...

<form id="myForm">
  <input id="inputFile" name="userfile[]" size="20" multiple="true" type="file" value="Browse" class="btn btn-primary" style="display:inline;margin:10px"></input>
  <button class="btn btn-primary">Upload a new non-image file</button>
</form>

通过ajax上传多个文件，多次上传文件

1 个答案: