Question

我无法点击按钮并访问我的相机和其他功能。

我的代码的HTML部分。我确实安装了所有必要的插件。我可以查看我创建的按钮。但点击它们没有任何反应。

<div class="row">
   <div class="col-sm-2"> </div>
    <div id="imgDiv" class="col-sm-5 col-xs-11 thumbnail">
      <img src="#" alt="Image" id="img" />
      <div class="text-center">
      <button type="button" class="btn btn-primary" id="btPhotoLib">Photo</button>
      <button type="button" class="btn btn-primary active" id="btCamera">Camera</button>
      <button type="button" class="btn btn-primary" id="btUpload">Upload</button>   
      </div>                        
    </div>              
</div>

我的JS档案：

var imgURI;
var serverURL ="ajlnfioej/upload.php";

$(document).ready(function(){
    document.addEventListener('deviceready', getCameraReady, false);    
});

function getCameraReady(){
    $('#btCamera').on('click', function(e){
        options = {quality:50, destinationType: Camera.Destination.FILE_URI,     sourceType: pictureSource.CAMERA};

        navigator.camera.getPicture(photoSuccess, photoFail,[options]);     
        }); 

    $('#btPhotoLib').on('click', function(e){
    options = {quality:50, destinationType: Camera.Destination.FILE_URI, sourceType: pictureSource.PHOTOLIBRARY};
    navigator.camera.getPicture(photoSuccess, photoFail,[options]);
});

$('#btUpload').on('click', function(e){
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";

    var ft = new FileTransfer();
    var server = encodeURI(serverURL);
    ft.upload(imgURI, server,uploadSuccess, uploadFail,options);        
});
}


function photoSuccess(uri){
    $("#img").attr("src", uri);
    $("#img").css("width": "100%", "height": "100%");
    imgURI = uri;
}

function cameraError(message){
    navigator.notification.alert("camera usage not supported on this device");
}

function uploadSuccess(result){
navigator.camera.cleanup();
navigator.notification.alert("Number of bytes is : " + results.bytesSent);
navigator.notification.alert("Http Response is : " +results.response );


function uploadFail(){
    alert("Am error has occured: Code = " + error.code);
}

Answer 1

我已经完成了你的代码并且已经完成了它。它已在Android和iOS上测试过，但我无法测试上传。

我已经纠正了你的javascript中的一些语法错误（有一些错过大括号以及其他一些小问题）。
当使用JQuery添加多个css标签时，你必须给它一个对象，看起来你只是错过了大括号。
在photoFail函数中添加，因为它已被使用但未定义。
为错误函数添加了错误参数。
Camera.getPicture options参数需要一个对象，但它有一个数组。
Camera.Destination未定义，应为Camera.DestinationType。
pictureSource未定义，应为Camera.PictureSourceType。

我从查看cordova-plugin-camera documentation获得了大部分内容。我建议你仔细阅读。

这是工作代码。您可以查看所有更改here。

var imgURI;
var serverURL ="ajlnfioej/upload.php";

$(document).ready(function(){
    document.addEventListener('deviceready', getCameraReady, false);    
});

function getCameraReady(){
    $('#btCamera').on('click', function(e){
        var options = {quality:50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA};

        navigator.camera.getPicture(photoSuccess, photoFail, options);     
    }); 

    $('#btPhotoLib').on('click', function(e){
        var options = {quality:50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY};
        navigator.camera.getPicture(photoSuccess, photoFail, options);
    });

    $('#btUpload').on('click', function(e){
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";

        var ft = new FileTransfer();
        var server = encodeURI(serverURL);
        ft.upload(imgURI, server,uploadSuccess, uploadFail,options);        
    });
}


function photoSuccess(uri){
    $("#img").attr("src", uri);
    $("#img").css({"width": "100%", "height": "100%"});
    imgURI = uri;
}

function cameraError(message){
    navigator.notification.alert("camera usage not supported on this device");
}

function uploadSuccess(result){
    navigator.camera.cleanup();
    navigator.notification.alert("Number of bytes is : " + result.bytesSent);
    navigator.notification.alert("Http Response is : " +result.response );
}

function uploadFail(error){
    alert("Am error has occured: Code = " + error.code);
}

function photoFail(error){
    alert("Am error has occured: Code = " + error.code);
}

无法通过PhoneGap访问IOS相机。按钮问题

1 个答案: