Question

我的代码遇到了问题。每当我输入我的函数uploadPhoto时，函数capturePhotoWithFile将无法工作（我按下按钮但没有任何反应）。但是当我删除函数uploadPhoto时，函数capturePhotoWithFile会再次起作用（我可以按下按钮并拍照）。

<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"/>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 

document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

function onPhotoFileSuccess(imageData) {
  console.log(JSON.stringify(imageData));
  var smallImage = document.getElementById('smallImage');
  smallImage.style.display = 'block';
  smallImage.src = imageData;
}

 function capturePhotoWithFile() {
    navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality: 50, destinationType:      Camera.DestinationType.FILE_URI });
}

function onFail(message) {
  alert('Failed because: ' + message);
}


function uploadPhoto() {

    var imageData = document.getElementById('smallImage').getAttribute("src");
    if (!imageData) {
        alert('Please select an image first.');
        return;
    }

    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageData.substr(imageData.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";

    }

    var ft = new FileTransfer();
    ft.upload(imageData, encodeURI("uploadtest.php"), win, fail, options);
    }

    function onFail(message) {
    console.log('Failed because: ' + message);
    }

    function win(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    //alert("Response =" + r.response);
    console.log("Sent = " + r.bytesSent);
    }

    function fail(error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
    }

</script>
</head>
<body>

<button onclick="capturePhotoWithFile();">Capture Photo</button> <br>
<button onclick="uploadPhoto();">Upload</button> <br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>

Answer 1

尝试这种方式：

function getPictureFromCamera(){
    navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType:Camera.DestinationType.FILE_URI }); 

    function onSuccess(imageURI) {
        $('#camera-image').css({'background-image': 'url('+imageURI+')', 'background-size':  '100%'});
    }

    function onFail(message) {
        console.log('Failed to get an image');
    }    
}

function getPictureFromGallery(){
    navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }); 

    function onSuccess(imageURI) {            
        $('#camera-image').css({'background-image': 'url('+imageURI+')', 'background-size':  '50%'});
    }

    function onFail(message) {
        console.log('Failed to get an image');
    }    
}

输出：

enter image description here

Phonegap捕获照片并上传到服务器

1 个答案: