任何应用程序都无法执行此选项 - 输入类型="文件"

时间:2017-04-18 16:03:50

标签: javascript android angularjs cordova ionic-framework

以前我可以在将图像转换为Base64之后添加图像的路径,然后将其输入到DIV中,但是在尝试执行该过程一段时间之后,我无法执行该操作,并且我得到以下内容消息:

image error

angular.module('perfilEstudiante', ['ionic', 'ngCordova'])
    .controller('mostrarPerfilEstu', mostrarPerfilEstu)
    .directive('pickFile', pickFile)
    .factory('obtenerPerfilEstu', obtenerPerfilEstu);


mostrarPerfilEstu.$inject = ['$scope', 'obtenerPerfilEstu'];

function mostrarPerfilEstu($scope, obtenerPerfilEstu, $element) {

    var Perfil, Mes, Periodo_Estu, input, button, evtHandler, dataImage;

    dataImage = localStorage.getItem("imgData");

    if (dataImage === null) {
        $scope.dataImage = "img/profile_icon.png";
    } else {
        $scope.dataImage = "data:image/png;base64," + dataImage;
    }

    $scope.loadImage = function (file) {

        if (file.type.indexOf('image') < 0) {
            $scope.res = "Tipo inválido";
            $scope.$apply();
            return;
        }

        var fReader = new FileReader();

        fReader.onload = function () {

            var data = fReader.result;
            $scope.dataImage = data;
            $scope.res = "";
            $scope.$apply();
            localStorage.setItem("imgData", data.replace(/^data:image\/(png|jpe?g);base64,/, ""));

        };

        fReader.readAsDataURL(file);
    };

};

function pickFile() {

    return {

        restrict: 'EA',
        scope: {
            onselected: "&"
        },

        template: '<button class="button button-icon icon ion-plus-round pull-right">' +
        '<input type="file" style="display: none !important">' +
        '</button>',

        link: function ($scope, $element) {
              var input = $element.find('input');
              var button = $element.find('button');

            var evtHandler = function () {
                input[0].click();
            };

            button.on('click', evtHandler)
            input.on('change', function () {
                var file = input[0].files[0];
                $scope.onselected({
                    file: file
                });
            });
        }

    };

};

智能手机中的Android版本是4.2.2

1 个答案:

答案 0 :(得分:1)

修改

遇到这个插件。看起来它会起作用。

https://github.com/dbaq/cordova-plugin-filepickerio/blob/master/README.md

<强>原始

Cordova不支持输入类型=文件。

您必须使用类似Cordova File Plugin:

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

与Cordova文件传输插件一起使用:

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/

如果您只想选择图像或图片,可以使用Cordova Camera Plugin

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/

使用此功能,您可以让用户从照片库中选择图像。这将被传递回应用程序,您可以使用文件传输插件将图像发送到服务器。

安装相机插件:

cordova plugin add cordova-plugin-camera

示例相机插件JS代码:

var cameraOptions = {

    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY
}

function cameraSuccess(data){

    console.log(data);

    var img = document.getElementById("yourImg");

    img.src = data;

}

function cameraError(error){

    console.log(error);

}

navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);

示例HTML:

<div><img id="yourImg" src=""/><div>