0

画像をアップロードするためにhtmlに入力を追加したいのですが、ボタンの横にメッセージが表示されているので、それを削除したいのですが、どうすればよいですか? このリンクは私の問題を示しています:

<input type='file'></input>

http://jsfiddle.net/c3sda/2/

ボタンに書かれているものをブラウズから別のものに変更したいのですが、それは可能ですか??

4

1 に答える 1

0

これを行うクロスブラウザの方法はありません。「ファイルが選択されていません」というテキストは、ウィジェットの実装定義部分にあり、ほとんどのブラウザーがブラウザー固有のカスタマイズの方法で多くを提供しているとは思いません。一方、value 属性が空の場合は、CSS を使用してテキストを何かで覆うことができます。

ただし、以下のデモリンクを確認できます。それはあなたを助けるかもしれません。

Big button (not hidden so you can see what's going on)
<div class="inputWrapper" style="height: 48px; width: 128px;">
    <input class="fileInput" type="file" name="file1"/>
</div><br/>

Big button (file input is hidden)
<div class="inputWrapper" style="height: 56px; width: 128px;">
    <input class="fileInput hidden" type="file" name="file2"/>
</div><br/>

Medium button (this one has text)
<div class="inputWrapper" style="height: 48px; width: 96px;">
    Upload File
    <input class="fileInput hidden" type="file" name="file3"/>
</div><br/>

Smaller button
<div class="inputWrapper" style="height: 24px; width: 24px;">
    <input class="fileInput hidden" type="file" name="file4"/>
</div>

Javascript:

/ jQuery を使用して、背景色/画像、フォント サイズ/太さ/色などを変更することで、ボタンを押す効果をシミュレートできます。/

$(function() {
    $(".inputWrapper").mousedown(function() {
        var button = $(this);
        button.addClass('clicked');
        setTimeout(function(){
            button.removeClass('clicked');
        },50);
    });
});

CSS:

.inputWrapper {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}

.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    /*This makes the button huge so that it can be clicked on*/
    font-size:50px;
}
.hidden {
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}


/*Dynamic styles*/
.inputWrapper:hover {
    background-color: #FDD;
}
.inputWrapper.clicked {
    background-color: #A66;
}


body {
    font-family:Helvetica;
}

または、デモをチェックしてください..

デモ

于 2013-07-23T12:46:44.957 に答える