Question

我遇到了一个奇怪的问题，仅在IE11上发生。我有以下表格：

<form id="myform" action="http://my.url.com/mypage" method="POST">
    <a href="#" class="js-triggerFileInput">Send the file</a>
    <input type="file" name="myfile" class="hidden js-inputFile" />
    <input type="submit" value="submit" class="hidden" />
</form>

以及以下javascript（带有转译器的ES6）：

class MyForm {
  constructor() {
    this.button = $('.js-triggerFileInput');
    this.file = $('.js-inputFile');
    this.form = $('#myform');
  }

  // when I click on the visible button, triggers the file input dialog box
  this.button.click(() => {
    this.file.click();
  });

  // the the file is selected in the dialog box, submit the form
  this.file.change(() => {
    this.form.submit();
  });

  // I added this just to debug
  this.form.submit(() => {
    console.log('submitted');
    return true;
  });
}

此功能适用于除IE11之外的所有浏览器，根本不提交表单。

我添加了一个调试程序，以查看是否调用了commit事件，并且每次都调用该事件，但是浏览器未提交表单。

如果我尝试使用“提交”按钮提交表单，则可以正常工作，但是当我尝试使用javascript提交时，它会触发事件，但不起作用。

有人知道我的代码有问题吗？

我什至尝试了另一种方法：

<label for="myinput">Send the file</label>
<input id="myinput" type="file" class="hidden" />

并使用默认的标签/输入行为来触发输入文件，而不必使用.click()，它似乎效果更好，但是在IE11中，如果隐藏了输入文件，则无法使用（显示）：无，可见性：隐藏或不透明：0）。

Edit1 ：如果我通过浏览器控制台触发了该事件，则表单已提交。

Answer 1

我没有找到问题的根源，但是我找到了一种绕过此IE错误的方法：

HTML：

<form id="myform" action="http://my.url.com/mypage" method="POST">
    <label for="myfile">Send the file</label>
    <input type="file" name="myfile" id="myfile" class="js-inputFile" />
    <input type="submit" value="submit" class="hidden" />
</form>

JS：

class MyForm {
  constructor() {
    this.file = $('.js-inputFile');
    this.form = $('#myform');
  }

  // the the file is selected in the dialog box, submit the form
  this.file.change(() => {
    this.form.submit();
  });
}

如果我不使用按钮+ JS来触发input [type =“ file”]行为，而是使用label + id来触发点击，则它就像一个魅力。问题似乎与使用JS触发输入[type =“ file”]有关。

也：

如果表单中没有输入[type =“ submit”]，IE不会发送表单。
IE不会触发输入[type =“ file”]是隐藏的还是不可见的，我已经使用height：0;实现了相同的行为。宽度：0；

调用IE11表单提交事件，但未提交表单

1 个答案: