Question

我编写了一个Ember组件，它表示可以处理文件上传的样式输入字段。为了实现这一目标，我使用了<div>和<input>。 <input>有visibility: hidden，一旦<div>上的点击事件被触发，我就会在Ember组件的操作处理中触发不可见<input>上的click事件。

我的问题是，在选择文件后，操作永远不会到达我的Ember组件。

添加文档-input.hbs

<div {{action "add"}} class="floating-button">
    <span>+</span>
</div>
{{input multiple="true" action="upload" on="change" accept="image/png,image/jpeg,application/pdf" type="file"}}

添加文档-input.js

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        upload() {
            console.log('This never happens');
        },
        add() {
            Ember.$("input[type='file']").click();
        }
    }
});

我猜这与我触发动作中的点击事件有关。这样第二次动作在视图中发生时就不会到达组件。

Ember版本：2.7.0

Answer 1

这是open issue。您可以使用原生输入元素和闭包操作拦截Employee事件，如建议的here。

change

Answer 2

就像@Ramy说的那样，

<input
  multiple="true"
  onchange={{action "upload"}}
  accept="image/png,image/jpeg,application/pdf"
  type="file"
/>

actions: {
  upload: function(event) {
    console.log('upload');
  }
}

通过实施这一点，为我工作。

输入类型=＆＃34;文件＆＃34;在Ember.js

2 个答案: