5

Mobile Safari が をサポートしていないことを理解してい<input type="file" />ます。ユーザーが HTML フォーム経由でファイルをアップロードできない場合に、ある種の「サポートされていない」情報を表示できるようにしたいと考えています。

私はこの質問に目を通しました.BKの答えは良いですが、決定的ではありません.

デバイスの幅に基づいてフォームを削除する方が賢明でしょうか? つまり、でデバイス幅をテストすることを意味し@media (max-device-width: 480px) {}ます。これは悪いアプローチですか？ブラウザで直接ファイルをアップロードできるモバイル デバイスは市場に出回っていますか?

iOS6 でメディア アップロードがサポートされることはわかっていますが、まだリリースされていません。他にもありますか？アンドロイドはどうですか？ウィンドウズ モバイル?

4

1 に答える 1

17

私はちょうどこれを試してみました...そしてそれはうまくいきます...

自分で試してみてください！http://fiddle.jshell.net/nmGRu/show/ (正しい結果を報告できないブラウザーを見つけた場合は、知りたいです...機能する追加のブラウザーについても同様に、この回答を完了するのに役立ちます)

Safari (iOS 5 以下) はfalse、ファイルのアップロードをサポートしていないため (具体的には、入力を追加できますが、無効としてフラグが立てられます)、Samsung Galaxy Tab (Android)、BlackBerry などのそれをサポートするモバイル ブラウザーが返されます。 PlayBook / BlackBerry 10 (Dev Alpha でテスト中) はtrue、ブラウザーがアップロードをサポートしているため、復活します。

これまでの正しいテスト結果:

  • Apple iPhone iOS 5 以下 Safari ( NOサポートを検出)
  • Apple iPhone iOS 6 Safari (サポートを検出 - 写真/ビデオの選択が可能)
  • Apple iOS 4/iOS 5、ジェイルブレイク、Safari Upload Enabler のインストール (サポートを検出)
  • Apple iPhone with Chrome ( NOサポートを検出)
  • Apple iPhone w/Opera Mini (サポートを検出 - 写真の選択が可能)
  • Chrome の Android バージョン (サポートを検出)
  • Firefox の Android バージョン (サポートを検出)
  • Opera の Android バージョン (サポートを検出)
  • BlackBerry OS7 スマートフォン (サポートを検出)
  • BlackBerry PlayBook (サポートを検出)
  • BlackBerry 10 (Dev Alpha および Z10) (サポートを検出)
  • HTC Desire (サポートを検出)
  • Samsung Galaxy Nexus (サポートを検出)
  • Samsung Galaxy Nexus S (サポートを検出)
  • Samsung Galaxy Nexus 7 タブレット (サポートを検出)
  • Samsung Galaxy Note (サポートを検出)
  • Samsung Galaxy S2 (サポートを検出)
  • Samsung Galaxy S3 (サポートを検出)
  • Samsung Galaxy Tab (サポートを検出)
  • Tizen (サポートを検出)

これまでの不正な検出テストの結果:

  • Windows Phone {Tango} (サポートを検出しますが、実際にはサポートしていません)

注: Windows phone での検出を解決するために、このコードの改訂に取り組んでいます。

これは、ブール値を返すだけのクリーン バージョンです...ページを汚染しません。

function hasFileUploadSupport(){
  var hasSupport = true;
  try{
    var testFileInput = document.createElement('input');
    testFileInput.type = 'file';
    testFileInput.style.display = 'none';
    document.getElementsByTagName('body')[0].appendChild(testFileInput);
    if(testFileInput.disabled){
      hasSupport = false;
    }
  } catch(ex){
     hasSupport = false;
  } finally {
    if(testFileInput){
      testFileInput.parentNode.removeChild(testFileInput);
    }
  }
  return hasSupport;
}

alert(hasFileUploadSupport());
于 2012-09-18T15:41:02.123 に答える