Question

我目前有这个代码：

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;

}

如您所见，当选择文件时，占位符仍然保持不变。我希望在选择文件时占位符为文件目录。

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

Answer 1

测试一下：

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

要更改您需要此javascript代码的值：

3-

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

选择文件后更改上传占位符

2 个答案: