javascript - 如何清除 aurelia 中的文件输入绑定(bind)

Question

Aurelia 与文件输入的绑定(bind)工作得很好，但是当我使用一个简单的将模型属性重置为空数组的清除函数时，绑定(bind)被清除，但浏览器文件输入继续显示所选文件的名称。

 <input type="file" class="form-control" id="file-upload" files.bind="selectedFiles" change.delegate="generatePreview()" aria-describedby="fileUploadHelp" ref="selectedFiles">

这是我当前的 html，在模型方面我简单地添加了一个 selectedFiles 作为空数组

现在当我尝试清除输入时，

clearFiles() {
    this.selectedFiles = [];
    // this.selectedFiles = null; setting to null also produces same results
}

它确实有效，并清除了模型中的数据。

但是浏览器文件输入一直在输入控件中显示所选文件的名称。

使用 jquery 思维方式或简单的 JS，添加一行以访问输入并将值设置为 '' 将很容易。

document.getElementById("file-upload").value = null;

但这不应该也适用于绑定(bind)吗？

我是否漏掉了一些明显的东西？

PS:我在最新的 chrome 和 firefox 中测试过，行为是相同的。

Answer 1

正如您所提到的，在 vanilla JS 中，您会将 value 设置为 null。因此，只需将 value 绑定(bind)添加到您的输入即可:

<input type="file" value.bind='val' files.bind='selectedFiles' />

然后在你的类中，将 val 设置为 null:

clearFiles() {
    this.val = null;
}