2017-02-24 72 views
0

我有一個拖放功能來處理Web和本地文件上傳。本地文件拖ñ下降工作正常鉻和Firefox,但IE瀏覽器給我下面的錯誤'無法獲取未定義或null引用'0的屬性'。下面是我的JS放棄行動。 IE正在將我的if語句的開頭指向問題的原因。我是否錯過了某種API或者有什麼東西需要聲明才能使用IE?刪除文件上的IE11傳輸未定義或空引用

$("#blightImgBack").on('drop', function(e) { 
debugger; 
console.log('on drop'); 
if (e.originalEvent.dataTransfer.items[0].kind === 'file') { 
    console.log('local file'); 
    imageLoaderBack = document.getElementById('blightImgBack'); 
    imageLoaderBack.addEventListener('change', handleBackImage); 
    function handleBackImage(e) { 
     console.log('function fired'); 
     e.preventDefault(); 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      console.log('updating src'); 
      $('#backImgUploader img').fadeOut(200, function() { 
       $('#backImgUploader img').attr('src',event.target.result); 
       $('#backImgUploader img').fadeIn(300); 
      }); 
     }; 
     reader.readAsDataURL(e.target.files[0]); 
    } 
} else if (e.originalEvent.dataTransfer.items[0].kind === 'string') { 
    e.preventDefault(); 
    e.originalEvent.dataTransfer.items[0].getAsString(function (url) { 
     $('#backImgUploader img').fadeOut(200, function() { 
      $('#backImgUploader img').attr('src', url); 
      $('#backImgUploader img').fadeIn(300); 
     }); 
    }); 
} 
}); 

回答

1

根據下表,IE5中的HTML5 drag'n'drop支持是粗略的,即使在邊緣。我無法在MSDN上找到有關特定瀏覽器支持的相關信息,但我的猜測是,在IE 11上甚至不存在items(我認爲它僅包含一個項目,請閱讀下面的github頁面):

http://caniuse.com/#feat=dragndrop

https://github.com/elsix/angular-jointjs-graph-demo/issues/5

+0

進一步的研究之後那是什麼它看起來像黯然。我的解決方案是根據瀏覽器類型更改UI文本。這樣,使用IE的用戶就如何上傳圖像提供了適當的指導。 – Tyharo

-1

我做了一個CodePen:https://codepen.io/Brianmanden/pen/NpqBwZ

我添加了幾行開始下載:

$("#blightImgBack").on("dragover", false); 

..和

$("#blightImgBack").on('drop', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    ... 
} 

我發現我所需要的信息在這裏:enter link description here

讓我們發佈你的進度伴侶:)