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

Question

我有以下设置：

• 单击“选择”后，将打开文件浏览器并选择一个文件。
• 所选的文件路径将显示在readonly文本框中
• “ SELECT”文件按钮的功能更改为提交文件

如果“选择”按钮更改为“上载”，但仅在选择文件时（文本框不为空时），我也希望输入文本。

我曾尝试对文本框使用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

以下是一种方法，尽管未测试：

 $('#file_button').click(function(){
     $(this)
         .text("Upload")
         .attr('type','submit');
  });

Answer 2

您可以在文件输入上使用change事件，例如：

newFile: function(e) {
  // Change fileName value to selected filename
  this.$.fileName.value = e.target.files[0].name;
  // Change uploadButton value
  this.$.uploadButton.value = 'Upload';
}

另外，如果以上示例未正确绑定，则可以使用隐藏输入代替：

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