1. 程式人生 > >iview圖片上傳相容ie10

iview圖片上傳相容ie10

iview圖片上傳不相容ie10,因為在上傳同一張圖片的時候ie10上傳不成功,下面是解決方法。

methods:{
        uploadSuccess:function(resp, file, fileList){
            window.filePic=file.response.data.pic;
            file.url=file.response.data.url;
            this.attIds.push(file.response.data.attId);
            this.$emit('input',this.attIds);
            //console.log(this.attIds);   ///att/download/b8abe3bb7e234646bb90b79d65c85a3f
            //相容ie10操作
            var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串  
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器  
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器  
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if(isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion == 10) {
                    var ofiles = document.getElementsByClassName("ivu-upload-input");
                    var oinput,oparent,oform;
                    for(var i=0;i<ofiles.length;i++){
                        oinput = ofiles[i];
                        oparent = oinput.parentElement;
                        oform = document.createElement('form');
                        oform.appendChild(oinput);
                        oparent.appendChild(oform);
                        oform.reset();
                        //重置操作後
                        oparent.appendChild(oinput);
                        oparent.removeChild(oform);
                        
                    }
                }
            }                      
        },

在圖片上傳成功的函式中,我們先判斷改瀏覽器是否是ie10,然後獲取圖片上傳<input>的class,ie10的問題在於刪除一個圖片後再上傳當前圖片上傳不成功,所以我們只需要在reset()之後,重新追加iview裡面的屬性就可以了。