iOS 和 Android 的 HTML 5 文件输入 [Cordova/Phonegap]答案

【问题标题】：HTML 5 File input with iOS and Android [Cordova/Phonegap]iOS 和 Android 的 HTML 5 文件输入 [Cordova/Phonegap]
【发布时间】：2014-11-27 08:32:19
【问题描述】：

在PhoneGap 应用程序中，我尝试使用像这样的HTML5 input 标记来使用相机。

使用 CLI 创建新项目
添加 iOS 和 Android 平台
添加相机插件
为两种设备构建
在两台设备上运行（实际设备 iPhone 5 和 iOS 7.1.2 和 Android 4.4.2 (Samsung Note)）

以下是我尝试执行的代码行

<input id="imageHolder" type="file" accept="image/*" capture />

它适用于 iPhone，但不适用于 Android。我错过了什么？或者Android不支持这个？在Android中点击该字段后没有任何反应，而在iPhone中它的行为如下所示

【问题讨论】：

imo 它在 android 中不被正确支持，请检查 cordova jira 和 this thread
@turtle 嗯。所以这对我来说是最坏的消息:(。无论如何感谢您的回复
如果您只想要照片，请使用您已经包含的相机插件。
您必须手动完成，您可以使用对话框插件确认，让用户在照片库的相机之间进行选择，然后将 Camera.sourceType 更改为 Camera.PictureSourceType.CAMERA 或 Camera.PictureSourceType。保存相册
我们在处理我们的一个项目时遇到了同样的问题。在探索了很多之后，我们找到了一些解决方案并且能够在 android 上运行它。但是，android 版本 4.4-4.4.2 仍然存在一些问题，因为这些版本不支持它。有关问题及其解决方案的更多详细信息，请访问以下链接：ipragmatech.com/fix-html5-file-input-cordova-android

标签： android ios html cordova

【解决方案1】：

我知道这是一个老问题，但答案不是使用 HTML，而是使用 JavaScript 和 cordova 插件。

我用过这个plugin

很容易使用。

例子：

if (device.platform == "Android") { //Here we check to see what OS is used. input with type file is supported on iOS, but not Android. So use plugin for Android
    fileStorage.open(function (uri) {
        if (callback) {
            callback(uri);
        }
        return uri;
    }, function (ex) {
        throw ex;
    });
} else {
    var file = document.createElement("input");
    file.type = "file";
    file.accept = ".pdf";
    file.style.display = "none";

    document.body.appendChild(file);
    file.click();

    file.onchange = function (f) {
        console.log(f);

        console.log(file.files);

        var reader = new FileReader()

        reader.readAsDataURL(file.files[0]);

        reader.onloadend = function () {
            if (callback) {
                callback(reader.result);
            }

            return reader.result;
        }

        document.body.removeChild(file);
    }
}

【讨论】：