Question

我几乎是第一次在ember（和js）中工作。

在这种情况下：有一个“选择文件”按钮。标准文件选择按钮已隐藏，并已替换为自定义按钮。用户单击按钮，出现文件选择窗口，用户选择他们的文件，然后单击“确定”。由于默认按钮已被隐藏，因此我需要向用户指示已选择文件。我想显示一条消息表明这一点。

在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

您应将操作绑定到文件输入的change event。在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 Observer上查看文件上传类别：https://www.emberobserver.com/categories/file-upload

选择文件后的操作

1 个答案: