输入类型="file" in Ember.js

Question

我编写了一个 Ember 组件，它表示可以处理文件上传的样式化输入字段。为了实现这一点，我使用了 <div> 和 <input>。 <input> 有 visibility: hidden，一旦触发 <div> 上的点击事件，我就会在 Ember 的操作处理中触发不可见的 <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();
        }
    }
});

估计跟我触发action中的click事件有关系。这样，第二次在视图中发生操作时，它不会到达组件。

Ember版本：2.7.0

Answer 1

这是一个open issue。您可以按照建议 here.

使用本机输入元素和闭包操作来拦截 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"/>

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');
  }
}

通过实施这个，为我工作。

输入类型="file" in Ember.js

Input type="file" in Ember.js

components

action

file

input

ember.js