IE11 上 Drop 文件传输未定义或空引用

Posted 2023-05-08

【中文标题】IE11 上 Drop 文件传输未定义或空引用

【英文标题】：IE11 on Drop file Transfer undefined or null reference

【发布时间】：2017-07-15 17:08:23

【问题描述】：

我有一个拖放功能来处理网络和本地文件上传。本地文件拖放在 chrome 和 firefox 中工作正常，但 IE 给我以下错误“无法获取未定义或空引用的 '0' 的属性”。下面是我的放置动作的 JS。 IE 指出我的 if 语句的开头是问题的原因。我是否缺少某种 API，或者我必须声明一些东西才能让 IE 工作？

$("#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】：

根据下表，IE 中的 html5 拖放支持是粗略的，即使在 Edge 上也是如此。我在 MSDN 上找不到有关特定浏览器支持的相关信息，但我的猜测是，items 甚至在 IE 11 上都不存在（我认为它只需要一项，请阅读下面的 github 页面）：

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

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

【讨论】：

经过更多研究，这就是它的样子。我的解决方案是根据浏览器类型更改 UI 文本。这样，使用 IE 的用户就可以正确地指导如何上传图片。

【参考方案2】：

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

我添加了几行代码：

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

.. 和

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

我在这里找到了我需要的信息：enter link description here

让我们随时了解您的进度伙伴 :)