Javascript 填写输入类型=文件框时更改按钮文本

我有以下设置：

• 单击“选择”后，将打开文件浏览器并选择文件
• 选定的文件路径将显示在

  只读

  文本框中
• “选择”文件按钮的功能更改为提交文件

如果“选择”按钮更改为“上载”，但仅当选择文件时（当文本框不为空时），我还希望显示文本

我曾尝试在文本框中使用更改时的

和输入时的
，但没有成功。。。如有任何提示，将不胜感激

以下是我的代码：

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>

js

 .fileUpload {
    display: none;
  }

  .fileName {
    width: 200px;
    padding-left: 10px;
    border: 1px solid var(--divider-color);
  }

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

以下是一种未经测试的方法：

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

以下是一种未经测试的方法：

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

您可以对文件输入使用更改事件，如：

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

您可以对文件输入使用更改事件，如：

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

有没有可能不在JQuery中实现？不惜一切代价试图避免它：-/很抱歉，您可以遵循JSILVERIST的答案。这对你有用吗？如果是，那么接受答案。有没有可能不在JQuery中这样做？不惜一切代价试图避免它：-/很抱歉，您可以遵循JSILVERIST的答案。这对你有用吗？如果是，则接受答案。