国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - jQuery-File-Upload is compatible with IE8 problem: the uploaded file cannot receive response
伊謝爾倫
伊謝爾倫 2017-06-12 09:31:48
0
1
1565

First give the code related to this problem:
The following code, I have successfully compatible with IE9, but failed IE8

 $("#file-upload").fileupload({           
            url: "/api/org/importOrg",
            add: function(e, data) {
                var file = data.files[0];
                $("#fileInput").val(file.name);
                $("#importSuccess").unbind().bind('click', function() {
                    if ($("#fileInput").val() === "") {
                        Messenger().post({
                            message: "請先上傳文件!",
                            type: 'info',
                            showCloseButton: true
                        });
                        return;
                    }
                    if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" )) {
                        Messenger().post({
                            message: '瀏覽器版本過老,不支持導(dǎo)入功能',
                            type: 'info',
                            showCloseButton: true
                        });
                        return;
                    } else if (!/.xls$|.xlsx$/.test(file.name)) {
                        Messenger().post({
                            message: '請上傳以.xls/.xlsx為后綴名的正確Excel模版文件',
                            type: 'info',
                            showCloseButton: true
                        });
                        return;
                    } else if (file.size >= 10485760) {//上傳文件大小不能超過10Mb
                        Messenger().post({
                            message: '上傳的文件大小不能超過10Mb',
                            type: 'info',
                            showCloseButton: true
                        });
                        return;
                    }

                    $('#importSuccess').showLoading({
                        'overlayWidth': $('#importSuccess').innerWidth(),
                        'overlayHeight': $('#importSuccess').innerHeight()
                    });
                    //var pNode = pNodeSelectTree.getId();
                    //$("#file-upload").fileupload({formData: {name: $("#fileInput").val(), //type:$("[name=userType]:checked").val() }});
                    $("#file-upload").fileupload({
                        formData: {
                            name: $("#fileInput").val()
                        }
                    });
                    console.log('before submit:'+ $("#fileInput").val());//before submit:組織導(dǎo)入模板.xls
                    //$("#file-upload").fileupload({url:"/api/org/"+pNode[0]+"/importOrg"});
                    data.submit();
                    console.log("after submit");//after submit
                });
            },
            done: function(e, rep) {
                console.log("done");//沒有觸發(fā)fail,沒觸發(fā)done回掉
                var myResult=JSON.parse(rep.result);//后端返回字符串,解析成JSON對象,請求的content-type應(yīng)該為text/plain,避免IE9下返回application/json提示下載,從而兼容IE9
              //  myResult={"failed":1,"succeed":10,"fails":[{"line":15,"name":"的薩芬","orgName":"組織","mobile":1352222222,"error":"出錯(cuò)啦!!!"},{"line":15,"name":"的薩芬","orgName":"組織","mobile":1352222222,"error":"出錯(cuò)啦!!!"},{"line":15,"name":"的薩芬","orgName":"組織","mobile":1352222222,"error":"出錯(cuò)啦!!!"}]};
                $('#importSuccess').hideLoading();
                $("#fileInput").val('');
                if (myResult.failed == 0) {
                    new Modal({
                        icon: "success",
                        title: "導(dǎo)入成功",
                        content: "成功導(dǎo)入" + myResult.succeed + "條數(shù)據(jù)",
                        isConfirm: false
                    }).show(function() {});
                } else {
                    $('#importErrorModal').html(importErrorModal(myResult));
                    new Modal('#importErrorModal').show();
                    $('#importErrorModal td>p').each(function(){
                      this.scrollWidth > this.offsetWidth && $(this).tooltip();
                    });
                    $('#importErrorModal .modal-header').moveAnimate({modalHeaders:'#importErrorModal .modal-header'});
                }

            },
            fail: function() {
                console.log("fail");//沒有打印,也就是說沒回調(diào)fail

                $('#importSuccess').hideLoading();
                $("#fileInput").val('');
            }
        });

The problem I encountered was not the so-called return of JSON data, but the problem of IE browser improving downloads. I have solved this problem.
The current problem is that under IE8, this program cannot call back the done and fail functions, but it is feasible in IE9 browser and other mainstream browsers.

  console.log('before submit:'+ $("#fileInput").val());//before submit:組織導(dǎo)入模板.xls
                    //$("#file-upload").fileupload({url:"/api/org/"+pNode[0]+"/importOrg"});
 data.submit();
 console.log("after submit");//after submit

According to the print result of the above program, it shows that the add function was successfully executed.
I also monitored the communication of the network. Only the loading.gif indicates that the communication is loading, and there are no other related replies.
The network communication of IE8 is like this:

This also proves that the done and fail functions are not called back, so what is the problem?

The network communication of successfully compatible browsers is as follows:

  • What I tried:

I tried to solve the IE9 compatibility issue yesterday, but the IE8 compatibility issue has not been solved since then. Although I also spent nearly a day searching for related issues on stack overflow, there was nothing. reward.

伊謝爾倫
伊謝爾倫

小伙看你根骨奇佳,潛力無限,來學(xué)PHP伐。

reply all(1)
洪濤

I am the subject. I spent two full days on this problem and finally solved it.
The reason why I was able to solve this problem is that I re-examined the code logic written by previous people. This problem is actually closely related to HTML code. I only paid attention to JS code before.

  • HTML code

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

We can see that this actually triggers click<input type="file"> through click<button>.
This is a very common technique, because <input type="file"> is ugly and difficult to customize (at least I don’t know how to customize its CSS). So by hiding the input and calling the input through the button, it becomes the choice of most people.
But IE8 does not allow this for security reasons, so input seems to be called, but no data is obtained.

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.

How to ensure safety in this way, I don’t know.

So in order to avoid this limitation, the HTML code is changed: it looks like the button is being clicked, but in fact it is clicking the
input

<p 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>
</p>

SASS

.uploadFile{
        span{
            position: relative;
            display: inline-block;
        }
        #file-upload { // 設(shè)置占據(jù)空間為0,看似點(diǎn)擊button,實(shí)則在點(diǎn)擊file-upload,從而避開IE8處于安全限制禁止間接點(diǎn)擊input type=file的bug
            position: absolute;
            width: 100%;
            height: 100%;//和父元素同高寬
            top: 0;
            right: 0;
            opacity: 0;
            filter: alpha(opacity=0);
        }//解決此bug的方法詳見http://wenzhixin.net.cn/2014/07/30/ie8_file_problem
    }

This is what I tried after reading this blog: http://wenzhixin.net.cn/2014/... and it works

My thoughts: Determine the root cause of the problem through debugging, and then search for answers on Google based on the problem.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template