2011-09-16 21 views
2

画像を表示しているPHPページで<input type="file">とIE8のサポートに問題があります。クリックすると、ファイルブラウザを開いてアップロードするファイルを選択します。IE8はtype = "file"をサポートしていますか?

これはFirefoxとChromeで問題なく動作しますが、私は問題が<input type="file">とIE8でサポートされていると確信しています。 IE8の結果は、画像が表示されないということであると私は...何も起こらない画像の代わりに座って白い四角形をクリックした場合のことをここで

はコードです:

<div class="file_wrap"> 
    <input id="file" type="file" name="file" onchange="sendfile();" /> 
</div> 

そして、 CSS:

.file_wrap { 
    background: url('icon/add.gif'); 
    overflow: hidden; 
    width:  116px; 
    height:  147px; 
    cursor:  hand; 
} 

.file_wrap input { 
    opacity: 0; 
    font-size: 999px; 
    cursor:  hand; 
} 

多分、皆さんの誰かが前に出会ったでしょうか?

+0

デモページへのリンクを提供できますか(ドメインが準備できていない場合はhttp://jsfiddle.net) – phihag

+0

FIFY。論理的/読みやすいフォーマットにアレルギーを起こす人が非常に多い。それは私を悲しくする。 :( –

答えて

5

<input type=file>要素のカスタムスタイリングは、明示的にお勧めしません。

最初に、デフォルトのルック・アンド・フィールは、さまざまなブラウザで全く異なっています(Safariについては言及していませんでした。Safariは他のブラウザとはまったく異なっています)。これだけでうまくスタイルを作るのは難しいでしょう。

さらに重要なことに、ほとんどのブラウザでは、重要なセキュリティ上の問題のために、多くの標準的なCSSおよびJavascriptアクションがfile要素で動作することを積極的に防止しています。

悪意のあるスクリプトがファイル名とパスを傍受したり変更したりするのを防ぐため、一部のJavascriptが防止されています。これが許された場合に起こり得ることの意味はかなり明白である。

さらに、この要素では、一般的にCSSを使用したスタイリングの量はかなり少なくて済みます。これは、悪意のあるページが要素をスタイリングしてファイル要素のように見せかけることができず、ユーザーがアップロードしてはいけないファイルをアップロードするように仕向けたからです。

This pageは、このテーマに関するさらに詳しい情報を提供し、それを正常にスタイリングするためのヒントを示します。

希望に役立ちます。

2

ChromeやFirefoxとは異なり、後でファイル名を含むテキストフィールドをクリックすると「ファイルを選択」ダイアログが表示されないため、この「ハック」は機能しません。

あなたができることは何もないと思います。ファイルアップロードフィールドのカスタムスタイリングが必要な場合は、SWFUploadのようなFlashベースのソリューションの使用を検討してください。

関連する問題