前端常见兼容问题系列6: 一些安卓APP的WebView中<input type="file">不工作

有一次想做一个HTML5的图片上传功能,主要是依赖<input type="file">来选择本地的图片。开始一切都很顺利,在浏览器中,在淘宝等容器中,都能如预期进行文件选择和上传。在iOS系统下的APP中也都工作正常,但是在一个安卓APP中,无论怎么尝试选择文件,都始终出不来。

我给input的onchange事件打了个alert(),点击时也没有任何反应。看来是<input type="file">在这个容器中根本就不工作。

经过一番检索,发现这其实是个非常老的问题了(惭愧)。是安卓APP的WebView默认屏蔽了该控件的使用,有些安卓APP之所以能支持文件选择和上传,主要可能是有可能采取了如下措施之一:

(1)可能在该APP中重写了相关方法(http://stackoverflow.com/questions/5907369/file-upload-in-webview)

(2)提供了JS Bridge来供web页面调用

所以,单从前端技术上是解决不了这个问题的。

这个问题之所以不太好排查,一方面跟手机端的图片上传功能我不太常用到有很大关系,另一方面也因为见到一些其它的APP容器能支持该功能,所以思维在习惯上已经形成定势,误以为这是WebView默认就支持的。

末了,顺便提醒一句,下次进行类似功能的需求评审,别忘了先了解下相应的APP容器是否支持该功能,如果没有,则需要找到相应的客户端开发同学评估一下工时,以免造成影响项目进度的风险哟!

时间: 2024-09-17 04:22:40

前端常见兼容问题系列6: 一些安卓APP的WebView中<input type="file">不工作的相关文章

前端常见兼容问题系列4:sort方法在浏览器中执行效果的差异

前面写了好几个安卓系统下一些手机中的兼容性问题.这次我们来一个iOS系统下的. 有这么一个HTML片段: <body> <p id="container"></p> <div> <script> var str = '' var arr = [ {name: "3", value: "50"}, {name: "2", value: "60"},

前端常见兼容问题系列8: 安卓机器中通过JS设置焦点无法拉起软键盘

有时候,为了优化用户体验,做交互设计的同学可能会希望让输入框自动获得焦点并弹出软键盘,这样用户不用点击输入框就可以直接输入.的确,这对用户来说很方便.但真正用HTML5页面去实现的时候,却遇到了问题. 首先我做了这样一个demo. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="apple-mobile

前端常见兼容问题系列3:永远置于顶层的video

上一篇我们把消失的video找了出来.这一篇我们接着在video上面遮盖一个层,以方便放置一些内容.于是,我们这么做: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no, address=no, email

前端常见兼容问题系列5:¥符号在部分Android APP的WebView中不见了

问题再现 ¥符号在涉及到售卖的页面再常见不过了.但是,测试中居然发现,华为荣耀6 plus(系统4.4.2)上,某APP中该符号不见了,所有用到该符号的地方均成了空白(如图1所示). (图1) 而实际上,我所期望的效果如图2所示: (图2) 分析过程 莫非是编码不对?首先,来看一下我是怎么实现¥这个符号的--用的是CSS,形如 .price:before{ content:'\A5'; display:block; font-size:12px; } 的伪元素. 发现这个问题之后,我尝试把它直接

前端常见兼容问题系列2:视频哪里去了?

<video>是HTML5中新增的重要标签,用它来引入视频这一生动活波的媒体形式,简单好用,因而这个标签在各种网页中非常常用.但它却并不那么完美. 问题来啦 我们来看一个再简单不过的页面(代码清单如下),主题内容只添加了一个video标签和一个用于做参照物的p标签: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

root-如何直接在手机上读取安卓app中用webview打开的网页的url?

问题描述 如何直接在手机上读取安卓app中用webview打开的网页的url? 手机已root.如何直接在手机上读取安卓app中用webview打开的网页的url? 解决方案 package com.example.webviewdemo; import android.net.Uri; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.view

兼容各浏览器的 input type=file 文件域美化

样式:  代码如下 复制代码 .fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;} .upfile{position:absolute;top:-100px;} .upFileBtn{width:102px;height:34px;opacity:0;f

前端常见兼容性问题系列1:丢失的CSS补间动画

[前言] 有人说,前端开发的过程常常就是一个不断"入坑"和"出坑"的.这句话道出了前端开发中的磕磕绊绊以及相伴而来的成长.遗憾的是,这些成长大都只存储在工程师的脑海里,日复一日的,相信总有不少人花掉昂贵的时间在重复解决着同样的"坑". Stack Overflow是我们查找一些常见bug解决办法的好帮手,但我们每天也遇到各式各样的新问题以及有一定独特性的问题.若能花一点精力将自己遇到的问题.思考过程.解决方案.延伸感悟等记录下来,让经验更具延续性

前端常见兼容性问题系列7: 部分浏览器不支持音频自动播放

1.问题又来了 曾做一个活动页,需要打开页面时自动播放一小段背景音乐.因为音乐持续时间非常短,所以设计这个页面时,没想要设置一个播放控制按钮.一开始我也以为确实没有必要.开发中,用我的老古董机器小米2S测了也没发现啥问题. 但是,用iOS机器测试时,问题就来了,有的平台中可以听到背景音乐(如iOS中的支付宝),有的则始终出不来(如iOS 中的Safari浏览器).用JavaScript来load音频,再自动触发音频的play()方法,也没有效果. 2.定位问题.查找原因 Google一番发现原来