CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-8jquery-file-upload
A.Chao
A.Chao

Reputation: 333

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

I will give my code first. 

$("#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
        }
    });

Firstly, I have to tell that I have made this program run successfully on IE9+ and other modern browsers but fail on IE8. Although the code doesn't make any error on IE8.

And this bug is not the famous bug about downloading response of json formating on IE browsers.( I have solved that problem in IE9.) Because I can't see network response in IE8 at all.

This is the screenshot of IE8's network which is achieved by IE11's emulation. I can only see the response of 'loading.gif'

enter image description here

I expect to see the response in the picture below which exists in Chrome and IE9+.

enter image description here

And from the result this program logs, we can see that none of function done and fail is executed.

Thanks a lot for paying attention to my question.

Upvotes: 1

Views: 514

Answers (1)

A.Chao
A.Chao

Reputation: 333

I am the person who ask the question.

In fact, the key is my code of HTML. Below is my HTML code which cause the problem.

<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" >

We can see from the code that input[type='file'] is clicked through click event of button. And the input[type='file'] is hidden.

This method is widely used because it's difficult to customize input[type='file']. This method can help us avoid this question.

However this trick can't work in IE8 because of one security restrict in 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.

So it doesn't work in IE8.

I have found the solution from a Chinese blog. I'll give the solution here.

HTML code

<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 code

.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
    }
}

The principle of the question: It seems like you click the button but in fact you click the input[type='file']. And you avoid customizing the input[type='file'].

This is my question.

Upvotes: 1

Related Questions