HTML的input标签在 type = "file"
时,即变为文件上传控件,浏览器会去监听这个标签,根据标签的另外一个 accept
字段的内容去调取各个平台的相关系统资源,如图片,视频,声音等,iOS也不例外。通过这个标签,移动端的H5页面就有直接获取系统资源的能力。但是有时候我们并不想让H5拿到原始的文件,或者是希望能够加工一下。比如:文件的压缩,文件格式转换,文件的编辑等。
<form>
<input type="file" accept="image/gif, image/jpeg"/>
</form>
也许大部分情况下我们会直接采用JS交互的方式。这种方式可定义和可控的程度都比较高,弊端也就是需要交互的地方都要跟H5协商好每个页面去写交互代码。
本文通过拦截的方式,笔者不认为是一种可靠的方案,因为随着iOS系统的升级很可能就变了,不利于项目的稳定,给维护带来麻烦。不过作为另外一种解决问题的思路,感兴趣还是可以看看的。
先以图片的获取为例
1. 寻找切入口
通过Debug View Hierarchy
工具查看视图树寻找点击H5标签的弹窗
第一层
显然这个ActionSheet无法决定最终是哪一张图片,这个切入点不合适,我们再往里面看。