HTML5获取文件夹路径之曲线救国

需求:

1.需要在页面中,实现单击按钮,弹出选择目录对话框,选择目录后,在页面中显示路径

 

环境:

Chrome V42以上,此版本已经禁止了NPAPI,因此通过插件形式,无法调用NativeAPI

注:HTML5只提供上传文件的对话框,不提供保存文件和选择目录的对话框

解决方法:

1.Chrome提供Native Message支持Chrome扩展和Native APP通过标准输入输出通讯

2.Native可以是MFC\Win32\.Net程序,Windows API SHBrowseForFolder 提供了选择目录功能

3.SHBrowseForFolder参数BROWSEINFO提供了父窗口句柄设置,窗口一旦形成父子窗口的关系,弹出的模态对话框就像是Chrome弹出的一样

4.Native获取到选择文件的路径后,通过Native Message发送至Chrome扩展的background脚本

5.Background将消息转发至content 脚本 

6.content脚本通过window.postMessage将消息发送至页面脚本 或直接在Content脚本中修改DOM

7.通过以上流程可以实现,在Chrome中选择目录

参考链接:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html