2

これは私のコードです：

html:

<form>
    <input id = "file" type="file" />

    <div id="custom_button">custom button</div>
</form>

Jクエリ:

$("#custom_button").on("click", function () {
    $("#file").click();    
});

CSS:

#file {
    display: none;
}

ただし、これはfirefoxとchrome、safariとoperaでのみ機能し、クリックするとcustom button、ファイル選択用のウィンドウが呼び出されません

デモ: http://jsfiddle.net/J4GdN/

質問: これがサファリとオペラで機能しないのはなぜですか? これらのブラウザでこれを行うための代替手段は何ですか?

4

2 に答える 2

1

一部のユーザー エージェントは、特に css display:none で、js による入力ファイル要素のクリックのトリガーを許可しません。別の方法は次のとおりです。

HTML

<input id="file-element" type="file" name="my-file-upload" />
<div id="file-element-replacement">
    <input type="text" value="" />
    <img alt="custom upload" src="custom-upload.png" />
</div>

CSS

#file-element {
    /* if opacity is 0 => some UAs interpret it like display:none */
    filter: alpha(opacity=1);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
    -moz-opacity: 0.01;
    -webkit-opacity: 0.01;
    opacity: 0.01;
    position: relative;
    z-index: 2;
}

#file-element-replacement {
    position: relative;
    top: -20px;
    z-index: 1;
}

入力ファイルを透明にし、入力テキスト + 画像を背後のレイヤーとして使用してこれをシミュレートします。

于 2013-05-02T08:43:04.110 に答える