选定文件后的操作

Question

我是在成员(和js一般)工作，几乎是第一次。

下面是场景:有一个“选择文件”按钮。标准文件选择按钮已被隐藏并替换为自定义按钮。用户单击按钮，出现一个文件选择窗口，用户选择他们的文件，然后单击'ok‘。由于默认按钮已被隐藏，所以我需要向用户指示已选择了一个文件。我想要显示一条指示这一点的消息。

在template.hbs中，我有一个类似的东西

<button class="outline-only inline-block" id="my_file_button" {{action 'clickButton' 'my_file'}}>
   {{fa-icon icon="mouse-pointer"}} Choose file
</button>
<input type="file" id="my_file" name="my_file"> <!-- this is set to display: none in css file -->
{{#if my_file_button_clicked}}
  {{fa-icon icon="check-circle"}} File selected
{{/if}}

在component.js中，我将其定义为actions的一部分

clickButton(button) {
  let self = this;
  jquery('#'+button).click();
  self.set(button+'_button_clicked', true);
}

这将导致“文件选择”消息在用户单击“选择文件”按钮后立即显示，无论他们是完成文件选择还是单击“取消”。如何才能使消息在完成的、成功的选择完成后才显示？

Answer 1

您应该将一个操作绑定到文件输入的事件。在ember.js中，您是这样做的：

<input type="file" id="my_file" name="my_file" onchange={{action 'fileChanged'}}>

事件作为参数传递给操作。它通过FileList包含对所选文件的引用。您可以使用它来检查用户是否选择了一个文件。如果用户选择了文件，则可以将对该文件的引用存储在变量中。一个原始的动作应该是这样的：

Component.extends({
  filesSelected: null, 

  actions: {
    fileChanged(event) {
      let files = event.target.files;
      this.set('filesSelected', files);
    }
  }
});

只有在选择了文件时，才可以使用该变量显示图标：

{{#if filesSelected.length}}
  {{fa-icon icon="check-circle"}} File selected
{{/if}}

请注意，已经有一些Ember插件提供您正在尝试实现的功能。我建议查看Ember观察者上的文件上传类别：https://www.emberobserver.com/categories/file-upload