android4.4webview支持openFileChooser文件/照片上传

H5拍照应用在mobile(android和ios)上的实现思路有以下三种：

第一种，H5直接使用新的video标签通过获取navigator的getUserMedia来获取视频流stream中截取一张图的方式来实现，不过这种方式在mobile上的支持比较晚。其中，android是从Android5.0才开始支持，ios未知。所以这种实现思路不做考虑。

第二种，H5直接用以前Html旧有的input标签来实现。其中这种方式在ios支持上还不错，在android上的支持则不怎么令人满意。因为它直接涉及到了webkit在android各个平台不同的实现方式，有很大的风险性。但是，出于方便让ios能直接调用的原因这个方式的可行性还是很大的。当然，问题并非不能解决，这个下面再讲。

第三种，H5直接利用js和本地进行交互来实现。这种方式的采用很成功的例子就是微信公众账号的实现，它通过实现一套js库来支持网页的各种调用。

------------------------------------------------------------------分割线----------------------------------------------------

以下是讲述android4.4webview支持openFileChooser文件/照片上传的一些思路：

大家都知道，android webkit在各个版本上的变化很大。其中，大家会发现android4.4对openFileChooser文件上传的支持是一片空白。我在这里只提供一些思路供大家参考。

第一种思路，自定义webkit使之支持openFileChooser，即将framework的webkit相关代码抽离出来，在源码的基础上修改后再打包。但是这种方式有很大的缺陷，第一你要完全的把webkit相关代码剥离出来打包，这对一般的应用开发者来说还是有一定难度的。第二，最大的问题是你这样做的话势必会增大apk包的体积，有点得不偿失了。我在网上查到的资料是会使apk包增加30-50MB的空间。。。

http://stackoverflow.com/questions/19882331/html-file-input-in-android-webview-android-4-4-kitkat

https://crosswalk-project.org/documentation/downloads.html

第二种思路，使用input标签。但是html中增加js对input标签进行拦截。如果android版本是4.4或者4.4.1或者4.4.2的话，将input标签隐藏，增加一个button和span标签，并添加事件支持，通过js和native交互的方式来实现。部分代码如下：

function fixAndroidFileUpload() {    var version = agate.device.os.version();    if (version != "4.4" && version != "4.4.1" && version != "4.4.2")        return;    if (agate.device.os.platform() != "Android")        return;    if (typeof(window.fixAFU_inputInfos) == "undefined")        window.fixAFU_inputInfos = new Array();    var inputTags = document.getElementsByTagName("input");    var i;    for (i = 0; i < inputTags.length; ++i) {        var inputTag = inputTags[i];        if (inputTag.type == "file" && inputTag.style.display != "none") {            if (inputTag.hasAttribute("inputInfoIndex"))                continue;            var infoIndex = window.fixAFU_inputInfos.length;            inputTag.setAttribute("inputInfoIndex", infoIndex);            inputTag.style.display = "none";            var patchedButton = document.createElement("button");            patchedButton.setAttribute("inputInfoIndex", infoIndex);            patchedButton.type = "button";            patchedButton.innerHTML = fixAFU_buttonInnerHTML;            inputTag.parentNode.insertBefore(patchedButton, inputTag);            patchedButton.form = inputTag.form;            var patchedTitle = document.createElement("span");            patchedTitle.setAttribute("inputInfoIndex", infoIndex);            patchedTitle.innerHTML = fixAFU_fileNameInnerHTML;            inputTag.parentNode.insertBefore(patchedTitle, inputTag);            patchedButton.onclick = function (e) {                window.fixAFU_lastInputInfo = e.target.getAttribute("inputInfoIndex");                agate.appLauncher.setSaveForImageCapture(true);                agate.appLauncher.setSaveDirForImageCapture('storage:Photo/');                agate.appLauncher.addEventListener("onComplete", "fixAFU_onFileChoose");                agate.runScript("device.systemPopup('', '" + fixAFU_chooseFileForUploadMessage + "','Camera:appLauncher.exec(\\'imageCapture\\')','Gallery:appLauncher.exec(\\'albums\\')','Cancel')");            };            var inputInfo = new Object();            window.fixAFU_inputInfos.push(inputInfo);            inputInfo.inputTag = inputTag;            inputInfo.patchedTitle = patchedTitle;            inputInfo.patchedButton = patchedButton;        }    }}

但是，这种思路有一定的局限性，那就是各个机型的适配。有些深度定制的厂家很可能会改动这一块。

第三种思路，就是采取上面第三种的方式，即直接通过js和本地native通信来实现。

------------------------------------------------------------------分割线----------------------------------------------------

附：Android各个版本对文件上传支持的方法：

// android 3.0以下：

void openFileChooser(ValueCallback uploadMsg)

// android 3.0以上，android4.0以下：

void openFileChooser(ValueCallback uploadMsg, String acceptType)

// android 4.0 - android 4.3

void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture)

// android4.4 无方法。。。

// android4.4.4

void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture)

// android5.0以上

boolean onShowFileChooser (WebView webView, ValueCallback filePathCallback, WebChromeClient.FileChooserParams fileChooserParams)

附件：

input标签上传文件的例子点击打开链接

联系方式：

陈俊

QQ：838704711

更多相关文章

随机推荐