android phonegap相机和图像上传 [英] android phonegap camera and image uploading

问题描述

我一直在努力做这项工作，从星期五以来搜索google和这里。
我的最终目标是能够拍摄多张照片，每张照片的标题和描述，并将其上传到服务器，然后显示在网页上。

我到目前为止是：给一个图像的标题和描述，浏览画廊，找到一个图像并选择它的能力。但是当我做的图像与表单一起上传，立即。我想要使​​用提交按钮。

我还有一个按钮来拍摄图像，并且页面上的图像预览显示。但是当我用相机拍摄图像时，我不知道如何上传我的表单。我能够使用一个div和innerHTML调用来打印到屏幕的图像数据...但老实说，我很迷失，甚至不知道从哪里开始发布特定的代码片段。我现在就会发布整个页面....

 < html> 
< head> 
< title>文件传输示例< / title> 
 
< script type =text / javascriptcharset =utf-8src =cordova-2.3.0.js>< / script& 
< script type =text / javascriptcharset =utf-8> 
 
 var pictureSource; // picture source 
 var destinationType; //设置返回值的格式
 
 //等待Cordova加载
 // 
 document.addEventListener（deviceready，onDeviceReady，false）; 
 
 // Cordova准备就绪
 // 
 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）; 
} 
 
 
函数失败（错误）{
 alert（发生错误：Code =+ error.code）; 
 console.log（upload error source+ error.source）; 
 console.log（upload error target+ error.target）; 
} 
 
 
 
 
 
 
函数capturePhoto（）{
 //使用设备摄像头拍摄照片，允许编辑和检索图像为base64编码的字符串
 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）{
 //取消注释以查看图像文件URI 
 // console.log（imageURI）; 
 
 //获取图像句柄
 // 
 var largeImage = document.getElementById（'largeImage'）; 
 
 //取消隐藏图片元素
 // 
 largeImage.style.display ='block'; 
 
 largeImage.src = imageURI; 
} 
 function capturePhoto（）{
 //使用设备摄像头拍摄图片并以base64编码的字符串检索图片
 navigator.camera.getPicture（onPhotoDataSuccess，onFail，{quality： 50，
 destinationType：destinationType.DATA_URL}）; 
} 
 
 
 
 //如果发生错误调用。 
 // 
 function onFail（message）{
 alert（'Failed because：'+ message）; 
} 
 
 
 
 
 
 
 
< / script> 
< / head> 
< body> 
  

 < h1>示例< / h1> 
< p>上传文件< / p> 
 
< form name =filenameid =file_name_formaction =＃> 
标题< br>< input type =textname =nameid =file_name/>< br> 
说明< br>< textarea type =textname =descriptionid =file_description/>< / textarea> 
< / form> 
< button onclick =capturePhoto（）;>使用相机< / button> < br> 
< button onclick =browse（）;>浏览图库< / button>< br> 
< img style =display：none; width：160px; id =smallImagesrc =/> 
< hr> 
< div id =smallTEXT> ggg< / div> 
< button onclickuploadPhoto（）;> submit< / button> 
 
 
< / body> 
  

解决方案>

根据这个答案： Phonegap android无法上传图片使用fileTransfer
你不能直接使用URI。

但是，似乎uri可以直接使用...

/ p>

  navigator.camera.getPicture（onPhotoUriSuccess，onFailCamera，{quality：50，
 destinationType：pictDestinationType.FILE_URI}）; 
  

并在成功上：

  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; //可以用文件发送附加信息
 
 var options = new FileUploadOptions（）; 
 option.fileKey =the_name_of_the_image_field; //依赖于api 
 options.fileName = imageUriToUpload.substr（imageUriToUpload.lastIndexOf（'/'）+ 1）; 
 options.mimeType =image / jpeg; 
 options.params = params; 
 options.chunkedMode = true; //这对于发送数据和文件很重要
 
 var headers = {'Authorization'：Basic+ Base64.encode（username +：+ password）}; 
 options.headers = headers; 
 
 var ft = new FileTransfer（）; 
 ft.upload（imageUriToUpload，url，succesFileTransfer，errorFileTransfer，options）; 
 
} 
  

顺便说一下，我在api上使用apache网络服务器网站，我看到这里，nginx可能有一个问题与分块模式：
PhoneGap chunckedMode真正上传错误

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>

解决方案

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

这篇关于android phonegap相机和图像上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！