2

私がデザインしているウェブサイトにこの小さな問題があります。かなり終わっていますが、ここで問題になっているのは jQuery だと思います。

コードは次のとおりです。

<img src="files/register_page/upload_photo/body.png" id="upload">
<input type="file" name="file_upload" id="file_upload" style="visibility:hidden;">

そして、ドキュメントの一部にあるjQueryは次のとおりです。

$(document).ready( function(){
      $("#upload").click( function(){
          $('#file_upload').click();
      });
    });

ただし、img をクリックしても何も起こらず、ファイルのアップロード ダイアログが表示されます。さらに情報や何かが必要な場合は、お知らせください。そうでない場合、ここで何が問題になる可能性がありますか? jQuery 1.8.0 を使用しています。

4

1 に答える 1

5

HTML5ラベル要素の使用:

<label for="file_upload"><img src="files/register_page/upload_photo/body.png" id="upload"></label>
<input type="file" name="file_upload" id="file_upload" style="visibility:hidden;">

フィドル

Chrome、IE、Opera で動作しますが、FF では動作しません。

ブラウザは、 でできることを制限する傾向がありますinput type="file"。label 要素は、id プロパティがそのプロパティと等しい入力にフォーカスをリダイレクトするforため、これは非表示要素をトリガーするための回避策です。

ただし、最新のブラウザーではこれらの制限のかなりの部分が緩和されているため、.click()問題なくトリガーできます。

ただし、CSS ハックを変更して、使用せずに非表示にするdisplay:noneかvisibility:hidden、古いブラウザーとの互換性を保つことができます。また

position:absolute; top:-100px;

または

opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
width:0; height:0;

displayまたはvisibilityCSS プロパティを使用せずに要素を非表示にできます。

フィドル

また、FF のラベル要素の回避策は次のとおりです。by とを変更できますvisibility:hidden。opacity:0

$('#file_upload').focus(function() {
    $(this).click();
});

フィドル。ただし、プライマリ スクリプトが正常に動作する場合、これは不要です。

于 2012-08-23T17:37:57.170 に答える