个人中心
gpt4 book ai didi

android phonegap相机和图像上传

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:06:15 25 4
gpt4 key购买 nike

自周五以来，我一直在努力完成这项工作，搜索谷歌和此处。我的最终目标是能够拍摄多张照片，每张照片都有标题和描述，并将它们上传到服务器，然后显示在网页上。

到目前为止，我所拥有的是:能够为一张图片指定标题和描述、浏览图库、查找图片并选择它。但是当我这样做时，图像会立即与表格一起上传。我希望能够使用提交按钮执行此操作。

我还有一个按钮来代替拍摄图像，并且会出现页面上图像的预览。但是当我用相机拍照时，我不知道如何上传我的表格。我能够使用 div 和 innerHTML 调用将图像数据打印到屏幕上……但老实说，我迷路了，甚至不知道从哪里开始发布特定的代码 fragment 。我将发布当前存在的整个页面....

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

最佳答案

根据这个答案:Phonegap android unable to upload image using fileTransfer您不能直接使用 URI....

但是，好像uri可以直接使用...(见我下面的代码)

编辑 25-7-2013我得到了这个工作:像这样调用:

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";  //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);

}

顺便说一下，我在 api 站点上使用了一个 apache 网络服务器，我在这里看到，nginx 可能在分块模式下有问题: PhoneGap chunckedMode true upload error

关于android phonegap相机和图像上传，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14447336/

25 4 0
文章推荐： Android 前置摄像头 API
文章推荐： javascript - 按照 YSlow 的建议组合 JavaScript 文件 - 最佳大小？
文章推荐： javascript - jQuery:在 jQuery 对象中存储附加/额外数据/信息？
文章推荐： ios - 使用 AVCaptureVideo 在 Swift 中捕获 240 fps 的视频
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com