web-dev-qa-db-ja.com

HTML5ドラッグアンドドロップファイルアップロードAPI（FF3.6のものなど）の存在を確認する方法

説明されている ここ のように、ファイルのHTML5ドラッグアンドドロップAPIをサポートすることになっているアプリケーションを書いています。ブラウザがこの種の狂気をサポートしているかどうかをプログラムでチェックしたいと思います:)今のところ機能する解決策は、ブラウザが次のようなFileReaderクラスを提供しているかどうかをチェックすることです。

  if (typeof(FileReader) == "undefined") {
    $("#dropbox").hide();
  } else {
    // connect events
    $("#filebox").hide();
  }

しかし、それは明らかに正しいものではありません（私はそのクラスをまったく使用していません）。

何か案は？

javascriptdrag-and-drophtml
24
konryd
if ("files" in DataTransfer.prototype) {...}
11
Paul Rouget

FileReaderの存在を確認することは、これを行う正しい方法です。 FileReaderは File Api の公式部分です。これを Modernizr と組み合わせます。ドラッグアンドドロップのサポートは リリース1.2の予定 です。 GitHubでソースを取得して、今すぐ作業を開始できるはずです。 http://github.com/Modernizr/Modernizr/blob/master/modernizr.js

if (!!FileReader && Modernizr.draganddrop) {
  // sexy drag and drop action
} else {
  // no drag and drop support available :(
}

Dive into HTML5 をまだご覧になっていない場合は、 HTML5の検出 に関するMarkPilgrimの提案を必ず確認してください。

19
dshaw

IE8でサポートするために dshaw の答えに少し変更を加える必要がありました。

if (!!window.FileReader && Modernizr.draganddrop) {
  // sexy drag and drop action
} else {
  // no drag and drop support available :(
}

あなたはそれを試すことができます ここ

17
matt burns

Modernizrをまったく扱いたくない場合は、ドラッグアンドドロップ検出の機能を複製するだけです。

var supportsDragAndDrop = function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

Modernizr GitHubリポジトリから入手しました：

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

3
German Latorre

純粋なModernizrアプローチを使用する

if (Modernizr.filereader && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};

または、基になるDOMチェックを直接使用しますが、例外処理を使用します

var featuresSupported = false;
try {
   if (!!(window.File && window.FileList && window.FileReader) && Modernizr.draganddrop)
     featuresSupported = true;
)
catch (err)
{
}

if (featuresSupported)
  <do sexy effects>
else
  <perform rollback to legacy stuff>
2
Alfishe
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
  alert('The File APIs are not fully supported in this browser. Please upgrade your browser.');
}
1
N A

このコードはIE8では失敗します。これはおそらくより良いでしょう：

if (typeof(FileReader) === 'function' && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};
1
Steven Benjamin

その少しトリッキー。 iOS7は、FileReaderとドラッグアンドドロップの両方の画像のアップロードをサポートしていると報告しています。 iOSではできない、より一般的なファイルのアップロードを探していたので、別の答えが必要でした。

Modernizr第57号 ここ でこの問題について説明しています。今ではウィンドウズ8とタッチとマウスの両方で、そのトリッキーです。私がうまく使ったchriskeebleによるコードが真ん中にあります。これは、Modernizrとエージェントの検出に依存しています。

0
Mark Kasson