android phonegap camera and image uploading

I have been trying to make this work, searched google and here since Friday. My ultimate goal is to be able take multiple pictures with a title and description for each and upload them to a server, then display on a web page.

What I have so far is: the ability to give one image a title and description, browse the gallery, find an image and select it. BUT when I do the image is uploaded along with the form, immediately. I would like to be able to do this using a submit button.

I also have a button to take an image instead, and a preview of the image on the page appears. BUT when I do take an image with the camera I do not know how to upload my form. I was able to print to the screen the image data using a div and innerHTML call... but honestly i'm so lost and do not even know where to start posting specific snippets of code. I will post the entire page as it currently exists right now....

<html>
<head>
    <title>File Transfer Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" charset="utf-8">

        var pictureSource;   // picture source
        var destinationType; // sets the format of returned value

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

        // Cordova is ready
        //
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}


        function browse(){
            navigator.camera.getPicture(uploadPhoto,
                                        function(message) { alert('get picture failed'); },
                                        { quality: 50,
                                        destinationType: navigator.camera.DestinationType.FILE_URI,
                                        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY }
                                        );
        }

        function uploadPhoto(imageURI) {
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";

            var params = {};
            params.value1 = "test";
            params.value2 = document.getElementById('file_name').value + "";
            params.value3 = document.getElementById('file_description').value + "";
            options.params = params;

            var ft = new FileTransfer();
            ft.upload(imageURI, encodeURI("http://site.com/pages/upload.php"), win, fail, options);
        }

        function win(r) {
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
        }

        function onFileSystemSuccess(fileSystem) {
            console.log(fileSystem.name);
        }

        function onResolveSuccess(fileEntry) {
            console.log(fileEntry.name);
        }

        function fail(evt) {
            console.log(evt.target.error.code);
        }


        function fail(error) {
            alert("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }






function capturePhoto() {
  // 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 });
}

function onPhotoDataSuccess(imageData) {
  // console.log(imageData);

  var smallImage = document.getElementById('smallImage');
  smallImage.style.display = 'block';
  smallImage.src = "data:image/jpeg;base64," + imageData;

  var smallTEXT = document.getElementById('smallTEXT');
  smallTEXT.style.display = 'block';
  smallTEXT.innerHTML = "data:image/jpeg;base64," + imageData;
}

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';

  largeImage.src = imageURI;
}
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 });
}



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







        </script>
</head>
<body>

    <h1>Example</h1>
    <p>Upload File</p>

    <form name ="filename" id="file_name_form" action="#">
    Title <br><input type="text" name="name" id="file_name" /><br>
    Description <br><textarea type="text" name="description" id="file_description" /></textarea>
    </form>
    <button onclick="capturePhoto();">Use Camera</button> <br>
    <button onclick="browse();">browse gallery</button><br>
    <img style="display:none;width:160px;" id="smallImage" src="" />
    <hr>
    <div id="smallTEXT">ggg</div>
    <button onclick"uploadPhoto();">submit</button>


</body>

标签： android camera cordova file-transfer

2条回答

走好不送

2楼-- · 2019-02-07 09:18

<!DOCTYPE html>
<html>
<head>
<title>Capture Audio,Image,Video</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
function captureSuccess2(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile2(mediaFiles[i]);
}
}
function captureSuccess3(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile3(mediaFiles[i]);
}
}
// Called if something bad happens.
//
function captureError(error) {
var msg = "An error occurred during capture: " + error.code;
navigator.notification.alert(msg, null, "Uh oh!");
}
function captureError2(error) {
var msg = "An error occurred during capture: " + error.code;
navigator.notification.alert(msg, null, "Uh oh!");
}
function captureError3(error) {
var msg = "An error occurred during capture: " + error.code;
navigator.notification.alert(msg, null, "Uh oh!");
}
// A button will call this function
//
function captureAudio() {
// Launch device audio recording application,
// allowing user to capture up to 2 audio clips
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});
}
function captureImage()
{
// Launch device camera application,
// allowing user to capture up to 2 images
navigator.device.capture.captureImage(captureSuccess2, captureError2, {limit: 2});
}
function captureVideo() {
// Launch device video recording application,
// allowing user to capture up to 2 video clips
navigator.device.capture.captureVideo(captureSuccess3, captureError3, {limit: 2});
}
// Upload files to server
function uploadFile(mediaFile) {
var win = function (r) {
alert("Code = " + r.responseCode);
alert("Bytes Sent = " + r.bytesSent);
alert("Audio Uploaded");
}
var fail = function (error) {
alert("An error has occurred: Code = " + error.code);
alert("upload error source " + error.source);
alert("upload error target " + error.target);
}
var options = new FileUploadOptions();
//options.fileKey = mediafile.file;
options.fileName = mediaFile.file;
options.mimeType = "audio/wav";
fileURL=mediaFile.fullPath;
var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://192.168.1.101:80/myfile.php"), win, fail,
options);
}
function uploadFile2(mediaFile) {
var win = function (r) {
alert("Code = " + r.responseCode);
alert("Bytes Sent = " + r.bytesSent);
alert("Image Uploaded");
}
var fail = function (error) {
alert("An error has occurred: Code = " + error.code);
alert("upload error source " + error.source);
alert("upload error target " + error.target);
}
var options = new FileUploadOptions();
//options.fileKey = mediafile.file;
options.fileName = mediaFile.file;
options.mimeType = "text/plain";
ImageURL=mediaFile.fullPath;
var ft = new FileTransfer();
ft.upload(ImageURL, encodeURI("http://192.168.1.101:80/myfile.php"), win, fail,
options);
}
function uploadFile3(mediaFile) {
var win = function (r) {
alert("Code = " + r.responseCode);
alert("Bytes Sent = " + r.bytesSent);
alert("Video Uploaded");
}
var fail = function (error) {
alert("An error has occurred: Code = " + error.code);
alert("upload error source " + error.source);
alert("upload error target " + error.target);
}
var options = new FileUploadOptions();
//options.fileKey = mediafile.file;
options.fileName = mediaFile.file;
options.mimeType = "video/mpeg";
VideoURL=mediaFile.fullPath;
var ft = new FileTransfer();
ft.upload(VideoURL, encodeURI("http://192.168.1.101:80/myfile.php"), win, fail,
options);
}
</script>
</head>
<body>
<center><h1>MCA3B Capture Session</h1></center><br><br>
<center> <button onclick="captureAudio();">Capture Audio</button> <br><br>
<button onclick="captureImage();">Capture Image</button> <br><br>
<button onclick="captureVideo();">Capture Video</button> <br>
</center>
</body>
</html>

Above is the code for capturing image,audio and video and upload it on local server.

0人赞添加讨论(0) 举报

\"骚年 ilove

3楼-- · 2019-02-07 09:25

According to this answer: Phonegap android unable to upload image using fileTransfer You cannot use the URI directly....

But, it seems the uri can be used directly... (see my code below)

Edit 25-7-2013 I got this working with: call like this:

navigator.camera.getPicture(onPhotoUriSuccess, onFailCamera, { quality: 50,
        destinationType: pictDestinationType.FILE_URI });

and on succes:

function onPhotoUriSuccess(imageUriToUpload){
    var url=encodeURI("http://your_url_for_the_post/");

    var username='your_user';
    var password='your_pwd';

    var params = new Object();
    params.your_param_name = "something";  //you can send additional info with the file

    var options = new FileUploadOptions();
    options.fileKey = "the_name_of_the_image_field"; //depends on the api
    options.fileName = imageUriToUpload.substr(imageUriToUpload.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";
    options.params = params;
    options.chunkedMode = true; //this is important to send both data and files

    var headers={'Authorization':"Basic " + Base64.encode(username + ":" + password)};
    options.headers = headers;

    var ft = new FileTransfer();
    ft.upload(imageUriToUpload, url, succesFileTransfer, errorFileTransfer, options);

}

By the way, I use an apache webserver on the api site, I saw here, nginx could have a problem with the chunked mode: PhoneGap chunckedMode true upload error

0人赞添加讨论(0) 举报

android phonegap camera and image uploading

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间