HTML how to remove text in FileUpload field?

Question

When I have a file upload field,

<form action="" method="post" enctype="multipart/form-data">
    <input id="image" type="file" name="image">
</form>

http://jsfiddle.net/jakeaustin5574/6DzgU/

It automatically creates a text "No file chosen" and a "Browse" button.

I want to change or remove this "No file chosen" text.

Is there anyway to achieve this in css or Javascript?

Thanks

Answer 1

You can apply css rules like...

  input[type=file]{ color:transparent; } 

Answer 2

First of all. You have to hide your input:

input#image{position:fixed;top:-100px;}

Secondly, you have to create alternative button with your skin:

<form action="" method="post" enctype="multipart/form-data">
   <input id="image" type="file" name="image">
   <button id="image_alt">Select image</button>
</form>

and the last step is to create a javascript script which link alternative button with original one:

document.getElementById('image_alt').addEventListener('click',function(){
    document.getElementById('image').click();
});

Example Fiddle

Answer 3

You can set the value of the image input to "" using jQuery to remove the selected file:

$("#image").val("")

See this fiddle:

http://jsfiddle.net/nfvR9/1/

NOTE: This is dependent on browser used. It's works in FF 22 and Chrome 29.

Answer 4

I am sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). check this styling article

Answer 5

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    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;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

take a look of this fiddle :

its working for your needs.

FIDDLE - DEMO

this demo its a reference of this: stackoverflow question LINK

From the autor:ampersandre

Answer 6

 $(function () { $('input[type="file"]').change(function () { if ($(this).val() != "") { $(this).css('color', '#333'); }else{ $(this).css('color', 'transparent'); } }); }) 

 input[type="file"]{ color: transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="app_cvupload" class="fullwidth input rqd"> 

Answer 7

The No file chosen text is entirely dependent on the browsers rendering engine - I assume you use Chrome. If Firefox you'll see No file selected and in IE you'll get a greyed out textbox with no value at all. This cannot be changed.

The alternative is to use a plugin (such as this ) which gives you complete control over the styling of the file control.

Answer 8

It's up to the browser to render the file upload box. Each one does this in your own way. For example, in my chrome I can see the No file chosen text. Someone using Firefox might see something else entirely. There is no direct way to control this rendering process.

However, there are some hacks which can be used. For details, check out this link .

Answer 9

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
 <img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
 <input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0);  position: relative; top: -25px; left: -1px" />
</div>
<a href="javascript:void(0)" id="filename" style="cursor:pointer;margin-top:15px;text-decoration:none;"></a>

function getFileName() {
    var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
    $("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
       getFileName();
});

http://jsfiddle.net/m44fp2yd/

Answer 10

this text show by browser different browser show different message

chrome show=no file choosen

mozilla show=no file selected

and same as ie