IE8中使用的jQuery-File-Upload:无法获得响应

时间:2017-06-02 09:29:43

标签: javascript jquery internet-explorer-8 jquery-file-upload

我不是以英语为母语的人。如果你因我的英语不好而感到困惑,请原谅我。

我会先给我的代码。

$("#file-upload").fileupload({           
        url: "/api/org/importOrg", //I get send the data to this url and expect to get response

        add: function(e, data) {
               //some operation here 

                $("#file-upload").fileupload({
                    formData: {
                        name: $("#fileInput").val()
                    }
                });
                console.log('before submit');//log: before submit                  
                data.submit();
                console.log("after submit");
            });
        },
        done: function(e, rep) {
            console.log("done"); //log nothing
            var myResult=JSON.parse(rep.result);
       //some unimportant operation here
        },
        fail: function() {
            console.log("fail");//log nothing

            //some unimportant operation
        }
    });

首先,我必须告诉我,我已经使这个程序在IE9 +和其他现代浏览器上成功运行但在IE8上失败了。虽然代码在IE8上没有出现任何错误。

这个bug并不是关于在IE浏览器上下载json格式化响应的着名bug。(我已经在IE9中解决了这个问题。)因为我根本无法在IE8中看到网络响应。

这是IE8网络的屏幕截图,它是通过IE11的仿真实现的。 我只能看到' loading.gif'

的回复

enter image description here

我希望在下面的图片中看到Chrome和IE9 +中存在的响应。

enter image description here

从该程序记录的结果中,我们可以看到没有执行任何功能和失败。

非常感谢你关注我的问题。

1 个答案:

答案 0 :(得分:1)

我是问这个问题的人。

事实上,关键是我的HTML代码。下面是导致问题的HTML代码。

<button class="btn btn-icon btn-blue" style="width:90px;height:32px" onclick="$(this).next().click()">
    <span class="icon-zcy icon-shangchuan mr" style="height:20px"></span>上传
</button>
<input type="file" name="files" style="display:none" class="btn-upload" id="file-upload" >

我们可以从代码中看到输入[type =&#39; file&#39;]是通过按钮的点击事件点击的。输入[type =&#39; file&#39;]被隐藏。

这种方法被广泛使用,因为很难自定义输入[type =&#39; file&#39;]。这种方法可以帮助我们避免这个问题。

然而,由于IE8中的一个安全限制,这个技巧在IE8中无法工作。

  

IE不允许操作type =&#34;文件&#34;由于安全原因,来自javascript的输入元素。设置文件名或调用click事件以显示浏览器对话框将导致&#34;访问被拒绝&#34;表单上的错误提交。

所以它在IE8中不起作用。

我从中国博客找到了解决方案。我会在这里给出解决方案。

HTML代码

<div class="uploadFile">
     <input type="text" class="input input-medium" id="fileInput">                       
     <span>
        <a href="javascript:void(0)" class="btn btn-icon btn-blue"  > <span class="icon-zcy icon-shangchuan mr" style="height:20px"></span>上传</a>
        <input type="file" name="files" class="btn-upload" id="file-upload" >
     </span>
 </div>

sass代码

.uploadFile{
    span{
        position: relative;
        display: inline-block;
    }
    #file-upload { // 
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        opacity: 0;
        filter: alpha(opacity=0);//works in IE
    }
}

问题的原则:您似乎点击了按钮,但实际上您点击了输入[type =&#39; file&#39;]。并且您避免自定义输入[type =&#39; file&#39;]。

这是我的问题。