###前提・実現したいこと
ドラッグ&ドロップでファイルアップロードをしたいが、chromeやsafariだと動くけど、IE11,edgeだと動かない
###発生している問題・エラーメッセージ
ドラッグ&ドロップと「ファイルを指定」の両方に対応して、ファイルアップロードをしたく実装したのですが、chromeやsafariだと問題なく動きますが、IE11,edgeだと動きません。 ドラッグ&ドロップでできたdataTransfer.filesを「ファイルを指定」にあるfilesに入れているのですが、IE11,edgeの場合のみうまく入りません。 type=fileは制約で上書きができないのかもしれませんが、その他の実装方法もうまくいかず行き詰まっている状態です。 元々は「ファイルを指定」を使った普通?のファイルアップロードだったのですが、要望によりドラッグ&ドロップでもできるように!ということで改修しています。
###該当のソースコード
javascript
1<tr id="drag-drop-area"> 2 <th><div class="required">ファイル</div></th> 3 <td > 4 ファイルをドラッグ&ドロップ、もしくは下の「ファイルを選択」をクリック<br /> 5 <input type="file" name="file" size="60" value="" onkeydown="return false;" onkeyup="return false;" id="fileInput" class="idsymbol"> 6 </td> 7 </tr> 8 <script type="text/javascript"> 9 var fileArea = document.getElementById('drag-drop-area'); 10 var fileInput = document.getElementById('fileInput'); 11 fileArea.addEventListener('dragover', function(evt){ 12 evt.preventDefault(); 13 fileArea.classList.add('dragover'); 14 }); 15 fileArea.addEventListener('dragleave', function(evt){ 16 evt.preventDefault(); 17 fileArea.classList.remove('dragover'); 18 }); 19 fileArea.addEventListener('drop', function(evt){ 20 evt.preventDefault(); 21 fileArea.classList.remove('dragenter'); 22 var files = evt.dataTransfer.files; 23 fileInput.files = files; 24 }); 25 </script> 26
###試したこと
microsoftのブラウザー以外では問題なく、「ファイルを指定」してのファイルアップロードは問題なく動いている状態です。
###補足情報(言語/FW/ツール等のバージョンなど)
javascript,html5
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/10 03:10
2017/03/10 03:35
2017/03/10 03:59