[英]Dynamically submitting a file upload form in IE10 using jQuery
我有一个表单,其唯一目的是上传文件,但出于用户体验的原因,我需要一个漂亮的按钮:
原始解决方案就像这样的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中是否内置了一些安全保护措施或文件上传限制,以防止其工作?
事实证明,是的,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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.