科尔多瓦:拍照后上传图像不起作用

Posted

技术标签:

【中文标题】科尔多瓦:拍照后上传图像不起作用【英文标题】:cordova: upload image not working after taking picture 【发布时间】:2015-01-25 03:56:42 【问题描述】:

我正在开发一个使用 Apache Cordova aka Phonegap 开发的 ios 应用程序。 我想分两步上传照片: 1. 拍摄照片并以小尺寸显示照片 2.上传照片 我需要一键拍照和一键上传。

我的脚本不起作用。怎么了?

这是我的 javascript 文件:

var pictureSource;
var destinationType;

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

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


function clearCache() 
    navigator.camera.cleanup();


var retries = 0;
function onCapturePhoto(fileURI) 
    var win = function (r) 
        clearCache();
        retries = 0;
        navigator.notification.alert(
        '',
        onCapturePhoto,
        'Der Upload wurde abgeschlossen',
        'OK');
        console.log(r);
    

    var fail = function (error) 
        navigator.notification.alert(
        'Bitte versuchen Sie es noch einmal.',
        onCapturePhoto,
        'Ein unerwarteter Fehler ist aufgetreten',
        'OK');
        console.log("upload error source " + error.source);
        console.log("upload error target " + error.target);
        if (retries == 0) 
            retries ++
            setTimeout(function() 
                onCapturePhoto(fileURI)
            , 1000)
         else 
            retries = 0;
            clearCache();
            alert('Fehler!');
        
    

    */do nothing*/



function capturePhoto() 
    navigator.camera.getPicture(onCapturePhoto, onFail, 
    quality: 50,
    destinationType: destinationType.FILE_URI
    );



function getPhoto(source) 
      navigator.camera.getPicture(onPhotoURISuccess, onFail, 
      quality: 50,
      destinationType: destinationType.FILE_URI,
      sourceType: source );
    

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


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

    var params = new Object();
    params.fileKey = "file";
    options.params = ; // eig = params, if we need to send parameters to the server request


    var ft = new FileTransfer();
    ft.upload(fileURI, encodeURI("http://XXXXXXXX.com/app/upload.php"), win, fail, options);




<div id="camera">
    <button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
    <button class="camera-control" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>

    <div style="text-align:center;margin:20px;">
        <img id="cameraPic" src="" style="width:auto;height:120px;"></img>
    </div>

    <button class="camera-control" onclick="photoUpload(imageData);">UPLOAD</button>
</div>

【问题讨论】:

【参考方案1】:

1.拍摄照片并以小尺寸显示照片

在这里你可以设置成功的图片 onCapturePhoto(fileURI) e.g.

<img id="cameraPic" src= "" style="width:120px;height:120px;" > </img> 

function onCapturePhoto(fileURI) 
  $("#cameraPic").attr("src", fileURI);

2。上传照片拍照一键上传

    <button class="camera-control" onclick="photoUpload();">UPLOAD</button>

    function photoUpload() 
        var fileURI = $("#cameraPic").attr("src");

        /* YOUR CODE TO UPLOAD IMAGE*/
    

【讨论】:

我在这种情况下更改了我的代码。但是上传按钮仍然不起作用。函数 photoUpload() var fileURI = $("#cameraPic").attr("src"); var options = new FileUploadOptions(); options.fileKey = "文件"; options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1); options.mimeType = "图像/jpeg"; options.chunkedMode = false;变量参数 = 新对象(); params.fileKey = "文件"; options.params = ;服务器请求的参数 var ft = new FileTransfer(); ft.upload(fileURI, encodeURI("xxx/app/upload.php"), win, fail, options); 告诉点击上传按钮后发生了什么...?告诉另一件事......你的科尔多瓦版本是什么......? 我的版本是 4.1.2。在 Firebug 我得到这个错误: ReferenceError: photoUpload is not defined 检查您是否缺少大括号或括号?或添加 //“向服务器请求的参数”注释这一行【参考方案2】:

更新

我刚刚重构了您的代码,希望对您有所帮助。

JavaScript

<script> 
    var sPicData; //store image data for image upload functionality

    function capturePhoto()
        navigator.camera.getPicture(picOnSuccess, picOnFailure,  
            quality: 20,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            correctOrientation: true
        );
    

    function getPhoto()
        navigator.camera.getPicture(picOnSuccess, picOnFailure,  
            quality: 20,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
            correctOrientation: true
        );
    

    function picOnSuccess(imageData)

            var image = document.getElementById('cameraPic');
            image.src = imageData;
            sPicData  = imageData; //store image data in a variable
    

    function picOnFailure(message)
        alert('Failed because: ' + message);
    

    // ----- upload image ------------
    function photoUpload() 
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = sPicData.substr(sPicData.lastIndexOf('/') + 1);
        options.mimeType = "image/jpeg";
        options.chunkedMode = false;

        var params = new Object();
        params.fileKey = "file";
        options.params = ; // eig = params, if we need to send parameters to the server request

        ft = new FileTransfer();
        ft.upload(sPicData, "http://XXXXXXXX.com/app/upload.php", win, fail, options); 
    

    function win()
        alert("image uploaded scuccesfuly");
    

    function fail()
        alert("image upload has been failed");
    

</script>

HTML

<div id="camera">
    <button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
    <button class="camera-control" onclick="getPhoto();">From Photo Library</button><br>

    <div style="text-align:center;margin:20px;">
        <img id="cameraPic" src="" style="width:auto;height:120px;"></img>
    </div>

    <button class="camera-control" onclick="photoUpload();">UPLOAD</button>
</div>

【讨论】:

我是这样弄的,但是upload-Button没有作用。 好的,看看这个修改后的代码。只需使用它,它应该可以工作

以上是关于科尔多瓦:拍照后上传图像不起作用的主要内容,如果未能解决你的问题,请参考以下文章

科尔多瓦插件不起作用

BackgroundGeoLocation 科尔多瓦插件不起作用

谷歌地图科尔多瓦地理定位API不起作用

科尔多瓦方向锁垂直翻转不起作用

CkEditor 图像上传在 laravel 中不起作用

科尔多瓦相机插件在 ios 8.1 中不起作用