0

input type=text（ファイル名を表示する）を表示するファイルアップロードフィールドを作成し、アップロードボタンをカスタム画像に置き換えたいと思います。

このようなもの：

ここに画像の説明を入力してください

ハックのない簡単な解決策をいただければ幸いです。

4

3 に答える 3

2

ブラウザがファイル アップロード フィールドを処理する方法が原因で、ハッキング以外の解決策は見つかりません。セキュリティ上の懸念から、悪意のある Web サイトがそれらをそうでないように見せるのを防ぐために、それらに対して実行できるスタイリングの量が制限されています。どの程度制限されるかはブラウザによって異なりますが、JavaScript やハック トリックを使用しないと、直接 HTML/CSS を使用して好みに合わせてファイル アップロード フィールドのスタイルを設定することはできません。

于 2012-05-30T13:54:17.667 に答える
0 
 <INPUT type="image" class="myButton" value="">

.myButton {
background:url(YOUR IMAGE) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}

ボタンの使用

<button type="submit" style="border: 0; background: transparent">
<img src="/images/Btn.PNG" width="90" heght="50" alt="submit" /> 
</button>
于 2012-05-30T13:56:49.107 に答える
0

jQuery を使用している場合は、このプラグインをご覧ください - https://github.com/ajaxray/bootstrap-file-field

この小さなプラグインは、ファイル入力フィールドをブートストラップ ボタン (構成可能なクラスを含む) として表示します。これは、すべてのブラウザーで同様であり、選択されたファイル名 (または選択エラー) を美しく表示します。

さらに、単純なデータ属性または JS 設定を使用して、さまざまな制限を設定できます。たとえば、data-file-types="image/jpeg,image/png"jpg および png 画像以外のファイル タイプの選択を制限します。

于 2016-06-08T20:28:34.103 に答える