3

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

  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事件被触发。但是，浏览器从不将表单数据 POST 到服务器；它只是坐在那里。

IE10 中是否有一些安全保护措施或文件上传限制阻止它工作？

4

1 回答 1

10

事实证明，是的，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。

于 2013-05-21T18:26:47.183 回答