jQuery-IE8中使用的文件上传：无法得到响应

Question

我先给出我的代码。

$("#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中根本看不到网络响应。

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

的回复

enter image description here

我希望看到下图中的响应，它存在于 Chrome 和 IE9+ 中。

enter image description here

从这个程序记录的结果中，我们可以看到 none 的函数 done 和 fail 被执行了。

非常感谢您关注我的问题

Answer 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>Upload
</button>
<input type="file" name="files" style="display:none" class="btn-upload" id="file-upload" >

从代码中我们可以看出，input[type='file']是通过按钮的点击事件被点击的。而输入[type='file']是隐藏的。

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

然而，由于 IE8 中的一个安全限制，此技巧在 IE8 中不起作用。

IE doesn't allow manipulation of the type="file" input element from javascript due to security reasons. Setting the filename or invoking a click event to show the browser dialog will result in an "Access is denied" error on the form submit.

所以它在 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='file']。并且您避免自定义输入[type='file'].

这是我的问题。

jQuery-IE8中使用的文件上传：无法得到响应

jQuery-File-Upload used in IE8: cannot get response

javascript

jquery

internet-explorer-8

jquery-file-upload