使用jQuery在IE10中动态提交文件上传表单

Dynamically submitting a file upload form in IE10 using jQuery

本文关键字：文件 表单 提交 动态 jQuery IE10 使用      更新时间：2023-09-26

我有一个表单，它的唯一目的是上传文件，但出于用户体验的原因，我需要一个漂亮的按钮:

  1. 加载文件对话框
  2. 在文件被选中时自动提交表单

最初的解决方案类似于这个JSFiddle，其中您有一个链接，加载文件对话框，然后监听对话框的change事件以自动提交表单:

$("input[type=file]").on("change", function () {
    // auto-submit form
    $("form").submit();
});
$("#my-nice-looking-button").on("click", function (e) {
    e.preventDefault();
    // load file dialog
    $("input[type=file]").trigger("click");
});

如果你试着摆弄，它可以在IE9, Chrome, Firefox等中工作，但它不能在Internet Explorer 10中工作。所有的JavaScript功能都可以工作，包括触发表单的submit事件。但是，浏览器从不向服务器发送表单数据;它就在那儿。

是否有一些安全保护措施或文件上传限制内置到IE10，阻止这工作?

事实证明，是的，IE10不允许您以编程方式加载文件对话框和在文件对话框上的change事件后自动提交表单。大概其中一个会起作用，而不是两个都起作用。除了我自己的实验，我还没有找到任何文件来支持这一说法。

我找到的解决方案是使用CSS样式文件对话框的按钮，这样它是不可见的，但放置在好看的按钮的顶部，所以当你认为你点击按钮，你实际上点击了文件对话框的"选择"按钮:

input[type=file] {
    /* positioning strategies will vary depending on design */
    font-size: 25px;
    position: relative;
    top: -50px;
    left: -10px;
    /* make it invisible! */
    opacity: 0;
    /* make the cursor act like it's hovering over an anchor tag */
    cursor: pointer;
    cursor: hand;
}

然后您只需要侦听change事件并像以前一样提交表单:

$("input[type=file]").on("change", function () {
    // auto-submit form
    $("form").submit();
});

这样做意味着你正在"有机地"加载文件对话框，IE10允许它发生，并允许你自动提交表单。

此解决方案也适用于WebKit和Firefox。

相关文章：