如何刪除文件上傳中的消息

Question

我想在html中添加輸入以上傳圖像，我的問題是在按鈕旁邊顯示了一條消息，我想刪除它我該怎么做？ 該鏈接顯示了我的問題：

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

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

我還想將按鈕上的文字從瀏覽更改為其他可能嗎？

Answer 1

沒有跨瀏覽器的方法可以做到這一點。 小部件的實現定義部分中包含“未選擇文件”文本，我不相信大多數瀏覽器會提供特定於瀏覽器的自定義方式。 另一方面，當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;
}

否則，請檢查演示。

演示版