绝大部分人都遇到了微信内置浏览器中input file元素点击没反应的情况,这其实并不是微信的错,微信没有做任何事情来限制你。
这个问题只存在于Android4.4或以上版本的系统,4.4以下是没问题的,IOS当然也是没有任何问题。所以这是google的错。从Android4.4以后的Webview中移除input file元素的支持,是出于系统安全问题的考虑。
那webview网页要上传文件怎么办呢?
如果是你自己自行开发的APP,那么简单,你可以在APP层面上对Webview组件进行扩展,使其支持input file。方法请谷歌或百度,现成代码大把,而且不难。
如果APP并不能由你来控制,比如你的网页想在微信安卓版内置浏览器中上传文件,那么就不能想着让腾讯去改微信代码让他支持input file了,他们不会理你的,就算是理你,那也不能马上解决问题,让几亿用户更新到最新版本,不是那么容易的事情。
但是,难不到我,好在微信留下了一条活路给你走,实在不行,引导用户跳出微信,让他们点击右上角菜单“在浏览器中打开”,哈哈。用户体验差了点,但是起码能实现上传啊。
此外,还有两点要提一下:
一,不同的浏览器,对input file的实现是不一样的,安卓下的浏览器,大多不支持多选,一个input file只能选一个文件。
二,微信的JSSDK有照片选择、上传、下载功能,使你能调用微信本身实现的功能,但是非常操蛋,无法用来解决input file不支持的问题。
选择照片功能,得到localID,是一段微信协议的url,类似“weixin://3456345345/345hg345g34”。此url可以放进img.src中显示图片,但是无法获取它的数据来保存到自己的服务器,当你试图用canvas来转化获取img的base64格式数据时,会引发“SECURITY_ERR:DOM Exception 18”异常,这是一个跨域安全限制,对于“weixin://”协议,根本无法通过服务端把它的域转换过来。
上传功能,使用localID,把图片上传到微信服务器,得到一个ServerID有效期3天。妈的,上传到微信服务器,有什么用。
下载功能,更离谱,使ServerID从微信服务器下载一个文件,下载后,你得到一个localID。那下载下来有什么用?只能放到img中显示一下。