如何删除文件上传中的消息

Question

I want to add input in html to upload images my problem is that next to the button a message shown and i want to remove it how i could do that? This link show my problem:

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

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

I want also to change the written on the button from browse to something else is that possible??

Answer 1

There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.

However you can check the demo link given below. It might help you.

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>

The Javascript:

/ You can use some jQuery to simulate a button-press effect by changing the background color/image, font size/weight/color, etc.. /

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

The 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;
}

Or else Jus Check the Demo..

Demo