Question

我有以下设置：

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

如果“SELECT”按钮更改为“UPLOAD”，我也想要文本，但仅在选择文件时（文本框不为空时）。

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

以下是一种方法，但未经过测试：

RedirectUrl

Answer 2

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

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

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

2 个答案: