1

画像または html の要素を表示し、高さを初期化するのが好きです。次のような画像の背後にあるhtmlで入力のファイルタイプを使用した場合:

<img src="image.png">
<input type="file" name="image" id="booksimage" style="opacity: 0">

そのため、入力要素が消え、画像をクリックするとファイルを開くダイアログが開きましたが、通常の入力要素の高さで機能します。入力要素に 100px の高さを設定すると、それ以上は機能しません。

HTMLの問題を見つけたとき、JavascriptまたはJqueryを使用して問題を解決することにしました。検索して、次のような同様の問題を見つけました。

javascriptを使用してファイル/参照ダイアログを開く方法は?

しかし、解決策は特別なブラウザ向けであり、Firefox はそれをサポートしていません。画像をクリックしてファイルブラウザダイアログを開く他の方法はありますか?!

4

4 に答える 4

1 
$('img').click(function() {
    $('input[type="file"]').click();
});
于 2013-01-17T09:57:04.743 に答える
0

残念ながら、ブラウザーは、 type="file"の入力タグをクリックすることによってトリガーされる特定のイベントなしでは、ファイルの参照ダイアログを開くことを許可しません。持っています。

于 2013-01-17T08:54:37.783 に答える
0 
<style type="text/css">
#file-image {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
}


#file-image input {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
}

</style>
<div id="file-image">
    <input type="file">
    <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" width="40" height="40" />
</div>
于 2013-01-17T10:26:56.057 に答える
0

これは数年遅れているかもしれませんが、これは Javascript なしでそれを行う方法であり、どのブラウザーとも互換性があります。

<label>
  Open file dialog
  <input type="file" style="display: none">
</label>

問題が見つかった場合は、入力のポインティングでfor属性を使用する必要がある場合があります。labelid

于 2015-01-21T19:45:12.597 に答える