javascript - Rxjs监听文件控件问题

问题描述

问 题

Rxjs 怎么监听 input file 值的变化。我看其他都是需要监听键盘事件的，而我这个值有可能不是通过键盘触发的。所以想问问还有什么思路使用Rxjs来实现？

解决方案

既然是一个文件，那就存在打开/读取/关闭这个过程，当然监视文件变化可以先监视这个文件的最后修改时间是否变化。基于这个思路，如果用 Rxjs 实现的话，我觉得可能没有现成的事件来完成，但是可以用定时器来实现。

如果说的是 file input 控件，直接监听 change 事件就可以

const file = document.getElementById("file");

Rx.Observable.fromEvent(file, "change")
    .map(e => e.target.value)
    .do(v => {
        console.log("hello", v);
    })
    .subscribe();

https://jsfiddle.net/voLdr8Ly/

如果需要在某些情况触发这个 change 事件（比如你手工修改了 multiple 属性之后就可以用代码触发一次），可以这么干：

const e = document.createEvent("HTMLEvents");
e.initEvent("change", false, true);
file.dispatchEvent(e);

https://jsfiddle.net/voLdr8Ly/1/

这篇关于javascript - Rxjs监听文件控件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！