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

Posted 2023-03-15

【中文标题】科尔多瓦：拍照后上传图像不起作用

【英文标题】：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没有作用。

好的，看看这个修改后的代码。只需使用它，它应该可以工作