2017-02-24 11 views
0

私は、Webとローカルファイルの両方のアップロードを処理するドラッグアンドドロップ機能を持っています。ローカルファイルのドラッグアンドドロップはchromeとfirefoxでは正常に動作しますが、IEでは次のエラーが表示されます '未定義またはnull参照の' 0 'のプロパティを取得できません。以下はドロップアクションのJSです。 IEは問題の原因としてif文の先頭を指しています。私は何らかの種類のAPIがないか、IEの動作を宣言する必要がありますか?DropファイルのIE11転送が定義されていないかnull参照

$("#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 drag'n'dropサポートは、Edgeでもスケッチされています。私はMSDNの特定のブラウザサポートに関する関連情報を見つけることができませんでしたが、私の推測ではitemsはIE 11にも存在しません(以下のgithubページを読んでください)。

より多くの研究の後http://caniuse.com/#feat=dragndrop

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

+0

はその悲しげのように見えるものをthatsの。私のソリューションは、ブラウザの種類に基づいて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

あなたの進捗状況に投稿してください:)

関連する問題