使用jQuery在IE10中动态提交文件上传表单 [英] Dynamically submitting a file upload form in IE10 using jQuery

问题描述

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

I have a form whose only purpose is to upload files, but for user experience reasons, I need a nice-looking button that:

1. 加载文件对话框
2. 选择文件后自动提交表单

原始解决方案类似于此JSFiddle ，在该链接中有一个加载文件对话框的链接，然后侦听对话框的change事件以自动提交表单:

The original solution was something like this JSFiddle, where you have a link that loads the file dialog, then listens for the dialog's change event to auto-submit the form:

$("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事件.但是，浏览器从不将表单数据发布到服务器.它就坐在那儿.

If you try that fiddle, it will work in IE9, Chrome, Firefox, etc., but it doesn't work in Internet Explorer 10. All the JavaScript functionality works, including the form's submit event getting fired. But, the browser never POSTs the form data to the server; it just sits there.

IE10是否内置了一些安全保护措施或文件上载限制，以防止其起作用?

Is there some security safeguard or file upload limitation built into IE10 that prevents this from working?

推荐答案

事实证明，是的，IE10不允许您以编程方式加载文件对话框，并且在<文件对话框上的c0>事件.大概其中一个会起作用，但不会两者都起作用.除了我自己的实验以外，我没有找到任何文档可以支持这一说法.

As it turns out, yes, IE10 does not let you both programmatically load a file dialog and automatically submit a form after a change event on a file dialog. Presumably one or the other will work, but not both. I haven't found any documentation to support this claim other than my own experimentation.

我发现的解决方案是使用CSS设置文件对话框按钮的样式，使其不可见，但位于美观按钮的顶部，以便您思考单击该按钮，实际上就是单击文件对话框的选择"按钮:

The solution I found was to use CSS to style the file dialog's button such that it was invisible, but laid over the top of the nice-looking button, so that when you think you're clicking on the button, you're actually clicking on the file dialog's "select" button:

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事件并像以前一样提交表单即可:

Then you just need to listen for the change event and submit the form as before:

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

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

Doing this means that you are "organically" loading the file dialog, and IE10 lets it happen and allows you to auto-submit the form.

此解决方案也可在WebKit和Firefox中使用.

This solution also works in WebKit and Firefox.

这篇关于使用jQuery在IE10中动态提交文件上传表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！