javascript - 当输入类型 = 文件框已填充时更改按钮文本

Question

我有以下设置:

• 点击“选择”时，文件浏览器将打开并选择一个文件。
• 所选文件路径将显示在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;
  },

Answer 1

您可以在文件输入上使用更改事件，例如:

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