HTML how to remove text in FileUpload field?

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

Answers


You can apply css rules like...

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

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


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.


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


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


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.


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.


<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>

JQuery:

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

Demo:

http://jsfiddle.net/m44fp2yd/


$(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">

this text show by browser different browser show different message

chrome show=no file choosen

mozilla show=no file selected

and same as ie


Need Your Help

mod_rewrite not behaving nicely

apache mod-rewrite

I have a simple project in which I'm attempting to do some rewriting of URLs to point to a couple PHP scripts.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.