在Ember.js中输入type ="file"

Question

我写了一个Ember组件,它代表一个可以处理文件上传的样式输入字段.为了达到这个目的,我使用了a <div>和a <input>.在<input>有visibility: hidden一次的单击事件<div>被激发我火上无形的单击事件<input>在灰烬组件的动作处理.

我的问题是,在选择文件后,操作永远不会到达我的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();
        }
    }
});

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

Ember版本:2.7.0

Answer 1

这是一个悬而未决的问题.您可以使用本机输入元素和闭包操作来拦截change事件,如此处所示.

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