web-dev-qa-db-ja.com

GoogleのHTML入力type =“ file” Chromeポップアップウィンドウが表示されない

HTMLタグに問題があります<input type="file" /> Google Chromeで。

予想通りページに「参照」ボタンが表示されますが、クリックしてファイルを選択すると、ブラウザからのポップアップダイアログウィンドウが全く開きません。

私は自分のフォームとFirefoxでテストし、正しく動作しました。どんなアイデアが間違っているのですか、どうすれば修正できますか？

ここにもコードがあります：

<form action="" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<label for="imgfile">File input</label>
<input type="file" name="imgfile" />
htmlformsgoogle-chromeinput
9
ltdev

これがChromeで機能しない理由はありません。私たちが与えた例のマークアップをHTMLファイルにコピーし、それを開いてみましたか？うまくいきますか？サードパーティのプラグインや拡張機能がそれを止めない限り、それはそうするべきです。

この問題を引き起こしている他の場所にマークアップがある可能性があります。おそらく、「ブラウズ」ボタンに到達する前にクリックイベントをキャッチする入力フィールド上のレイヤーですか？

5
Philip Bennison

私の場合、問題は次のとおりでした：

  1. ドキュメント全体に「クリックハンドラ」がありました

  2. クリックハンドラ内で、コードはすべての伝播をキャンセルしていました

    falseを返します。

このreturnステートメントを削除すると、input = fileの問題が解決しました。

9
Mitja Gustin

入力タイプファイルが機能しない原因は2つ考えられます。

  1. ファイルタイプの入力は、可視性としてスタイル設定されています：非表示。入力を非表示にするには、opacity：0を使用します。
  2. ドキュメントまたは親要素のクリックイベントが、入力タグのクリックに抵抗している可能性があります。
3
Shahrukh Azeem

それが誰かを助けることを願っています。私の場合の問題は、ドキュメント全体にeventListenerを適用していたため、ドキュメント全体にevent.preventDefault()を適用していたことです。

_function onMouse( event ) {

        event.preventDefault();
        
        // calculate mouse position in normalized device coordinates
        // (-1 to +1) for both components

        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        
        mouseEventHandler( event );
        
}

document.addEventListener( 'click', onMouse, false );_

カスタムイベントハンドラーをドキュメント全体ではなく1つのdivにのみ適用し、特に、別のdivで設定されたフォームイベントをオーバーライドするイベントハンドラーを使用したくありませんでした。そのため、eventListenersのスコープを 'visualizationContainer' divに制限しました。

document.getElementByID('visualizationContainer').addEventListener( 'click', onMouse, false );

これですべてが修正されました。

0
Mark Scott Lavin