cordova：上传图片不工作后，picutre [英] cordova: upload image not working after taking picutre

问题描述

Iam在使用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; 
} 
 
函数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！'）; 
} 
} 
 
 * /不做任何操作* / 
} 
 
 
 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，如果我们需要发送参数到服务器请求
 
 
 var ft = new FileTransfer（）; 
 ft.upload（fileURI，encodeURI（http://XXXXXXXX.com/app/upload.php），win，fail，options）; 
} 
 
 
 
< div id =camera> 
< button class =camera-controlonclick =capturePhoto（）;> Foto aufnehmen< / button> 
< button class =camera-controlonclick =getPhoto（pictureSource.PHOTOLIBRARY）;>来自照片库< / button>< br& 
 
< div style =text-align：center; margin：20px;> 
< img id =cameraPicsrc =style =width：auto; height：120px;>< / img> 
< / div> 
 
< button class =camera-controlonclick =photoUpload（imageData）;> UPLOAD< / button> 
< / div> 
  

解决方案

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; //将图像数据存储在变量
} 
 
函数picOnFailure（message）{
 alert（'Failed because：'+ message）; 
} 
 
 // -----上传图片------------ 
 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，如果我们需要发送参数到服务器请求
 
 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-controlonclick =capturePhoto（）;> Foto aufnehmen< / button> 
< button class =camera-controlonclick =getPhoto（）;>来自照片库< / button>< br& 
 
< div style =text-align：center; margin：20px;> 
< img id =cameraPicsrc =style =width：auto; height：120px;>< / img> 
< / div> 
 
< button class =camera-controlonclick =photoUpload（）;> UPLOAD< / button> 
< / div> 
  

Iam working on a iOS App developed with Apache Cordova aka Phonegap. I'd like to upload photos in two steps: 1. Capture the photo and show the photo in small size 2. Upload the photo I need one button for taking the picture and one button to upload.

My script dosn't work. Whats wrong?

Here is my JavaScript file:

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>

解决方案

Updated:

I have just re-factored your code, hope it will help you.

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>

这篇关于cordova：上传图片不工作后，picutre的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！