我有以下设置:
- 点击“选择”时,文件浏览器将打开并选择一个文件。
- 所选文件路径将显示在
readonly
文本框中 - “选择”文件按钮的功能发生更改以提交文件
如果“选择”按钮更改为“上传”,但仅当选择文件时(当文本框不为空时),我还需要文本。
我尝试对文本框使用 on-change
和 on-input
,但没有成功...任何提示将不胜感激。
以下是我的代码:
html
<div class="horizontal layout fileUploadContainer">
<paper-button class="upload" id=uploadButton on-click="uploadButton">Select</paper-button>
<input type="text" id="fileName" class="fileName" placeholder="File..." on-click="changeButton" on-change="changeButton"></input>
<input type="file" class="fileUpload" id="fileUpload" on-change="newFile">
</div>
CSS
.fileUpload {
display: none;
}
.fileName {
width: 200px;
padding-left: 10px;
border: 1px solid var(--divider-color);
}
js
uploadButton : function() {
if(this.$.fileName.value == ""){
this.openUpload();
}
else {
}
},
openUpload : function() {
this.$.fileUpload.click();
},
changeButton : function() {
this.$.uploadButton.innerHTML = "submit";
},
newFile : function(e) {
this.$.fileName.value = this.$.fileUpload.value;
},
最佳答案
您可以在文件输入上使用更改事件,例如:
newFile: function(e) {
// Change fileName value to selected filename
this.$.fileName.value = e.target.files[0].name;
// Change uploadButton value
this.$.uploadButton.value = 'Upload';
}
或者,如果上面的示例未正确绑定(bind),您可以使用以下方法代替隐藏输入:
var input = document.createElement('input');
input.type = 'file';
input.onchange = function(e) {
// Change fileName value to selected filename
this.$.fileName.value = e.target.files[0].name;
// Change uploadButton value
this.$.uploadButton.value = 'Upload';
}.bind(this);
input.click();
关于javascript - 当输入类型 = 文件框已填充时更改按钮文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45458351/