我制作了一个简单的插件,用于使用隐藏的iframe上传图像。从本质上讲,它用链接替换了文件对话框,单击该链接会触发文件对话框,选择文件后会自动上传。
这在Chrome、Safari和Firefox中非常有效。不幸的是,包括9在内的所有IE版本都拒绝提交该文件。文件对话框显示得很好,如果我提醒该值,它会显示选定的文件,但提交事件显然不会触发。如果我用实际的文件对话框选择了文件,那么它会按预期工作,甚至在不点击提交按钮或任何东西的情况下发送文件。
其中只包括用于做事的相关代码,显然还有用于jQuery插件等的代码。
var self = this;
var randId = Math.floor(Math.random()*1001);
var iframeHTML = '<iframe id="iframe'+randId+'" name="iframe'+randId+'" style="visibility:hidden;height:1px;width:1px;"></iframe>';
var formHTML = '<form method="post" enctype="multipart/form-data" encoding="multipart/form-data" action="'+settings.action+'" target="iframe'+randId+'" id="form'+randId+'" >';
var inputHTML = '<input type="file" name="upload" id="input'+randId+'"><input type="submit" id="submit'+randId+'" value="Submit" />';
$(this).append(iframeHTML+formHTML+inputHTML+'</form>');
$('input#input'+randId).change(function() {
if($(this).val() != '') {
if(settings.spinner != '') {
$(settings.spinner).show('fade');
}
}
$('form#form'+randId).submit();
});
$(settings.activator).click(function(e) {
e.preventDefault();
$('input#input'+randId).trigger('click');
});
settings.activator是用于打开文件对话框的链接。
我需要一些IE特定的东西才能工作吗?我知道这应该是可能的,因为其他脚本也会这样做,但我不太热衷于使用它们,因为就我的需求而言,它们中的大多数都太庞大了,功能也太丰富了。我也不想使用任何基于Flash的解决方案。
编辑:就目前而言,我只是通过在IE中显示文件输入框并使用合适的浏览器来解决这个问题。我仍然想知道除了"链接顶部的不透明隐藏输入框"破解IE之外,是否还有实际的解决方案。
我记得看到IE7忽略了表单提交的目标隐藏iframe。尝试将iframe移出视图,而不是实际隐藏它:
.iframe_hidden {
width: 0;
height: 0;
position: relative;
left: -9999px;
}