14

我正在 android phonegap 中做项目，我想将图片上传到服务器。

但我不明白，我应该把这段代码放在哪里。

我无法显示任何按钮来上传照片，请帮忙。

我是新来的。我从 phonegap 文档中引用了这段代码。

我尝试了几个小时，但无法获得更好的解决方案。

这是我的第一个 android phonegap 项目。

代码：

   <head>
   <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
   <script type="text/javascript" charset="utf-8">        
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {           
        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 = "param";

        options.params = params;

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

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

    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);
    }

    </script>
 </head>
 <body>
    <h1>Example</h1>
    <p>Upload File</p>
 </body>
4

5 回答 5

10

您使用以下代码解决了您的问题：

<script type="text/javascript">  
function uploadFromGallery() {

    // Retrieve image file location from specified source
    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)+'.png';
    options.mimeType="text/plain";

    var params = new Object();

    options.params = params;

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

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

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);
}
</script>
</head>
<body>
   <a data-role="button" onClick="uploadFromGallery();">Upload from Gallery</a> 
</body>

查看这篇文章的更多信息： https ://stackoverflow.com/a/13862151/1853864

于 2013-07-03T14:55:59.017 回答
5

试试下面的代码。

// A button will call this function
// To capture photo
function capturePhoto() {
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(uploadPhoto, onFail, { 
        quality: 50, destinationType: Camera.DestinationType.FILE_URI 
    });
}

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

function uploadPhoto(imageURI) {
    //If you wish to display image on your page in app
    // Get image handle
    var largeImage = document.getElementById('largeImage');

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

    // Show the captured photo
    // The inline CSS rules are used to resize the image
    largeImage.src = imageURI;

    var options = new FileUploadOptions();
    options.fileKey = "file";
    var userid = '123456';
    var imagefilename = userid + Number(new Date()) + ".jpg";
    options.fileName = imagefilename;
    options.mimeType = "image/jpg";

    var params = new Object();
    params.imageURI = imageURI;
    params.userid = sessionStorage.loginuserid;
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    var url = "Your_Web_Service_URL";
    ft.upload(imageURI, url, win, fail, options, true);
}
//Success callback
function win(r) {
    alert("Image uploaded successfully!!");
}
//Failure callback
function fail(error) {
    alert("There was an error uploading image");
}
// Called if something bad happens.
// 
function onFail(message) {
    alert('Failed because: ' + message);
}

在您的 HTML 页面中创建一个按钮，onclick根据您的要求在它的事件调用以下功能上。

  • 调用capturePhoto()函数来捕获和上传照片。
  • 调用getPhoto()函数从图库中获取图像。

HTML 应包含如下按钮：

<input name="button" type="button" onclick="capturePhoto()" value="Take Photo"/>

<input name="button" type="button" onclick="getPhoto();" value="Browse" />

希望有帮助。

于 2013-07-03T11:54:22.273 回答
0

这是我将图片上传到服务器的一个示例应用程序

function getphoto() 
{
   navigator.camera.getPicture(uploadPhoto, function(message)
   { 
     alert('get picture failed');
   },

   {
     quality: 10,destinationType:navigator.camera.DestinationType.FILE_URI,sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY }); 
   }

function uploadPhoto(imageURI) 
{   
    alert("imageURI: " + imageURI);
    document.getElementById("myimg").src = imageURI;
    alert("imageURI :  " + imageURI);
    var options = new FileUploadOptions(); 
    options.chunkedMode = false;
    options.fileKey = "recFile"; 
    var imagefilename = imageURI; 
    options.fileName = imagefilename; 
    options.mimeType = "image/jpeg"; 
    var ft = new FileTransfer(); 
    ft.upload(imageURI, "http://192.168.5.109:86/YourService.svc/SaveImage", win, fail, options); 
} 

function win(r) 
{ 
    alert("Sent = " + r.bytesSent); 
} 

function fail(error) 
{ 
    switch (error.code) 
    {  
     case FileTransferError.FILE_NOT_FOUND_ERR: 
      alert("Photo file not found"); 
      break; 
     case FileTransferError.INVALID_URL_ERR: 
      alert("Bad Photo URL"); 
      break; 
     case FileTransferError.CONNECTION_ERR: 
      alert("Connection error"); 
      break; 
    } 

    alert("An error has occurred: Code = " + error.code); 
}

希望这可以帮助

谢谢 AB

于 2013-07-03T11:02:02.610 回答
0

嗯，这对我有用。

trustAllHosts：可选参数，默认为false。如果设置为 true，则它接受所有安全证书。这很有用，因为 Android 拒绝自签名安全证书。不推荐用于生产用途。支持 Android 和 iOS。（布尔值）

最后一个参数添加true如何布尔值。

前

var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);

后

var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options, true);
于 2014-09-29T15:39:58.277 回答
0

在此处输入链接描述

这是使用 html java脚本通过cordova或phonegap函数将多个图像上传到服务器的100%工作方法的链接

多张图片上传到科尔多瓦的服务器

于 2017-09-14T06:13:56.563 回答