Changing upload placeholder after chose file

Question

I have this code currently:

HTML:

<div class="row upload">
<form enctype="multipart/form-data" action="" method="post" class="col-md-12">
 <label for="file" class="filebutton">No file has been selected</label>
 <input style="opacity:0" type="file" name="file" id="file" />
 </form> 
 </div><!--End of row upload-->

CSS:

label {
    background-color: #eeeeee;
    width: 500px;
    height:50px;
    font-weight: normal;
    color: #777777;
    padding:20px;
    margin-top: 10px;

}

As you can see, when file is chosen, the placeholder still remains the same. I want placeholder to be file directory when file is chosen.

FIDDLE: http://jsfiddle.net/7rtJ5/

Answer 1

test this :

HTML :

<div class="row upload">
    <form enctype="multipart/form-data" action="" method="post" class="col-md-12">
        <input id="uploadFile" placeholder="Choose File" disabled="disabled" />
        <label for="file" class="filebutton">No file has been selected</label>
        <input style="opacity:0" type="file" name="file" id="file" />
    </form> 
  </div><!--End of row upload-->

js:

document.getElementById("file").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};

Answer 2

1- html
<div class="fileUpload btn btn-primary">
        <span>Upload</span>
        <input type="file" class="upload" />
</div>

2- css

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

to change value you need this javascript code :

3-

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};