Jquery文件上传无法在IE中运行

时间:2011-06-14 08:21:57

标签: javascript jquery internet-explorer file upload

我制作了一个简单的插件,用于使用隐藏的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。

1 个答案:

答案 0 :(得分:1)

我记得看到IE7忽略表单提交目标隐藏的iframe。尝试将iframe移出视图而不是实际隐藏它:

.iframe_hidden {
    width: 0;
    height: 0;
    position: relative;
    left: -9999px;
}