Question

让我说我有以下的HTML ..

<select name="certificatesSelect"
        ng-model="$ctrl.selectedCertificate"
        ng-change="$ctrl.onSelectCertificate()"
        ng-options="certificate as certificate.name for certificate in $ctrl.certificateDropdownOptions track by certificate.id">

<input id="certificate-upload-file-input"
       type="file"
       style="visibility: hidden"
       accept=".der,.crt"/>

由ng-options填充的一个选项是“浏览...”选项。当用户从选择框中选择“浏览...”选项时，我希望能够拉出浏览器提供的文件上载窗口，即用户点击文件类型输入框时的操作。

我对此的初步尝试如下：在我的控制器上，我将onSelectCertificate函数绑定到更改选择框的事件。

onSelectCertificate() {
            // if the selected option is the "Browse..." option
            if (this.selectedCertificate.id === this.BROWSE_OPTION_ID) {
                // find the input element and click on it
                this.certificateFileInput = this.$element.find("input[type='file']");
                this.$timeout(() => {
                    this.certificateFileInput.click();
                }, 0);
            }
        }

然而，这不起作用。经过一些在线阅读后，我认为这是因为一个安全问题，只有USER发出的点击事件才能通过javascript触发另一个点击事件。因此，选择框的ng-change绑定不能通过javascript触发我自己的点击事件。现在，我的问题是，有没有其他方法可以实现这种选择框设计？

从html选择标记中选择一个选项后，触发文件上载对话框

0 个答案: