0

ハックを使用して、すべてのブラウザーでファイル入力が一貫して表示されるようにしています。私はこのテクニックを使用しています。基本的に、ファイル アップロード入力の不透明度を 0 に設定し、スタイル設定された別の入力の上に絶対に配置します (クロス ブラウザーの一貫性のため)。ユーザーが [ファイルのアップロード] 領域をクリックすると、実際にはその下の入力をクリックしていますが、アップロード領域の不透明度がゼロであるため、アップロード ダイアログ ボックスが引き続き表示されます。このハックは非常にうまく機能します (詳細はリンクを参照) が、主な問題が 1 つあります。不透明度が 0 に設定されているため、参照ボタンが機能したことをユーザーに知らせるために必要なファイル パスが表示されません。

次のことを行う jquery ソリューションを探しています。ユーザーがファイルを参照すると、jquery はファイル名/パスを変数に格納し、その変数を別の入力 (前の入力) の値として表示します。つまり、ユーザーがファイルを選択すると、ファイル名が他の入力に値として表示されます。

ここに私のHTML / CSSがあります：

<div id="upload">
    <input type="text" id="fakeUpload" value="Choose File">
    <span class="file-upload">
        <input type="file" name="file-upload" class="wpcf7-file" size="1" value="1">
    </span>
</div>


#upload{position:relative; float:left; width:100%; cursor:pointer;}
#upload input#fakeUpload{position:absolute; top:0; left:0; display:block; font-size:15px; color:black; background:#f1f1f1; padding:7px 5%;  width:90%!important; cursor:pointer; z-index:1;}
#career input[type="file"] {opacity: 0; position:absolute; top:0; left:0; z-index:2; text-align: right;}
4

2 に答える 2

1

クリックの不透明度だけに依存しないでください。ユーザーが一貫性のない表示のブラウザー（モバイルブラウザーなど）を使用している場合、ファイル入力が「偽の」入力の真上にない可能性があるため、ユーザーはそれをクリックできません。

これは同等の解決策ですが、実際の入力をクリックするにはjavascriptに依存します：html。「実際の」入力は非表示になっていないことに注意してください。ただし、これにを適用できますdisplay:none。

フィドルを参照してください：http：//jsfiddle.net/QPUJa/

html：

normal file:<input type="file" name="myfile" id="myfile" />
<br /> <br /> 
Fake: <input type="text" id="choosebox" />
<a href="#" id="choose">Choose</a>

js：

$("#choose").click(function(){
    $("#myfile").click();
    return false;
});

$("#myfile").change(function(){
    $("#choosebox").val($(this).val())
});

これに基づいて、すべての入力ファイルを自動的に検出し、ページの読み込み時に偽のファイルに置き換えるスクリプトを作成するのは簡単です。

于 2012-05-31T18:51:05.317 に答える
1

追加：

$('.wpcf7-file').on('change', function(){
    $('#fakeUpload').val(this.value);
});

http://jsfiddle.net/fEp68/

デモにはあなたのスタイリングはありませんが、想像力を働かせることができます :]

于 2012-05-31T18:40:14.897 に答える