picutre

picutre

关注
发信
关注(28)粉丝(399)

cordova：上传图片不工作后，picutre

本文介绍了cordova：上传图片不工作后，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 size2. Upload the photoI 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-16 05:35
Powered by LMLPHP ©2024 picutre 0.050802