如何使用cordova 3.3.0从相机和图库上传照片到服务器

时间:2014-01-03 06:36:44

标签: iphone cordova-3

我正在学习cordova版本3.3.0。我用这段代码在iphone中打开相机和画廊,但没有取得任何成功。

我的代码:

    <script type="text/javascript">
        var pictureSource;   // picture source
        var destinationType; // sets the format of returned value

        // Wait for device API libraries to load
        //
        document.addEventListener("deviceready",onDeviceReady,false);

        // device APIs are available
        //
        function onDeviceReady() {
            pictureSource=navigator.camera.PictureSourceType;
            destinationType=navigator.camera.DestinationType;
        }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
        // Uncomment to view the base64-encoded image data
        // console.log(imageData);

        // Get image handle
        //
        var smallImage = document.getElementById('smallImage');

        // Unhide image elements
        //
        smallImage.style.display = 'block';

        // Show the captured photo
        // The in-line CSS rules are used to resize the image
        //
        smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
        // Uncomment to view the image file URI
        // console.log(imageURI);

        // Get image handle
        //
        var largeImage = document.getElementById('largeImage');

        // Unhide image elements
        //
        largeImage.style.display = 'block';

        // Show the captured photo
        // The in-line CSS rules are used to resize the image
        //
        largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                                    destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
        // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
        navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
                                    destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function getPhoto(source) {
        // Retrieve image file location from specified source
        navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
                                    destinationType: destinationType.FILE_URI,
                                    sourceType: source });
    }

    // Called if something bad happens.
    //
    function onFail(message) {
        alert('Failed because: ' + message);
    }

    </script>

任何人都可以指导我如何使用cordova打开相机和图库,就像我们在本地打开一样。

先谢谢。

2 个答案:

答案 0 :(得分:1)

请看我的代码......

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

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

  function uploadFromGallery(){
                 navigator.camera.getPicture(uploadPhoto, function(message){
                 console.log("get picture failed");
                  },{ quality: 75,destinationType:         navigator.camera.DestinationType.FILE_URI,sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY,allowEdit:true} );
                                   }




function uploadPhoto(imageURI) {
               global_URI=imageURI;
                var largeImage = document.getElementById('largeImage');
               // Unhide image elements
                largeImage.style.display = 'block';
                // Show the captured photo
                  largeImage.src = imageURI;
               }


 function capturePhoto() {
          largeImage.src='';
          // Take picture using device camera and retrieve image as base64-encoded string
                                             navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 75,destinationType: destinationType.FILE_URI,saveToPhotoAlbum: true, allowEdit:true});

                                   }


     function onPhotoDataSuccess(imageURI) {
                // Uncomment to view the base64-encoded image data
                // Get image handle
                global_URI=imageURI;
               var largeImage = document.getElementById('largeImage');
                 // Unhide image elements

                 largeImage.style.display = 'block';
                // Show the captured photo
                   largeImage.src = imageURI;

      }

function uploadimageonserver (){

var options = new FileUploadOptions();
   options.fileKey="image";
                                                          options.fileName=global_URI.substr(global_URI.lastIndexOf('/')+1);
  options.mimeType="image/jpeg";
                                                           var params = new Object();
                                                            options.params = params;
                                                            params.user_id =userID;
                                                            params.post_id=postId;
                                                            var ft = new FileTransfer();
                                                            ft.upload(global_URI, encodeURI(ipAddress +"/post_comment.php"), win, fail, options);
}

function win(r) {
                                                var result = JSON.parse(r.response); alert(result);

}

  function fail(error) {
                                                    var err="An error has occurred: Code ="+error.code;
}

答案 1 :(得分:0)

请确认您已仔细创建项目。

1. included cordova.js in html page
2. added xml folder containing config.html to res folder
3. added required permissions in android project manifest file.

if everything is ok, it should work. then check for javascript error (use try and catch clock)