想要上传图片到服务器使用phonegap android

我正在做android phonegap项目，我想上传图片到服务器。想要上传图片到服务器使用phonegap android

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

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

我是新来的。我从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>

来源

2013-07-03 Manu

错误：找不到变量：FileUploadOptions – nick

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

<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-03 14:55:59

thankz很多它的工作原理 – Manu

感谢。它的正确解决。但我们需要上传多张图片。请给我一个想法，使用此cordova文件传输上传多个图像。 – Sathiyaraj

对不起兄弟:(我帮不了你，但我认为使用文件传输。当我发现这个解决方案，我所使用的插件和一些原生代码，Android和iOS，你不能上传多张图片。 –

这是我做的PIC上传到服务器

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-03 11:02:02

PLZ proive我一些按钮调用DIS上传功能 – Manu

绑定起作用的一些按钮！创建一个！ ;） – MAST3RMIND

亚我做到了，但没有胜利或失败警报显示 – Manu

尝试以下操作代码。

// 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-03 11:54:22

如何，在何处以及何时调用uploadPhoto（imageURI）功能和什么将是imageURI参数中的值？ –

@ jolly.exe'uploadPhoto（）'得到在'capturePhoto（）'成功回调自动调用和imageURI将自动发送。你不必在任何地方明确地调用它。 –

我也面临着类似的问题，但没能解决它。你可以请这个问题stackoverflow.com/questions/40514847 – Ironic

嗯，这是我的工作。

trustAllHosts: Optional parameter, defaults to false. If set to true, it accepts all security certificates. This is useful since Android rejects self-signed security certificates. Not recommended for production use. Supported on Android and iOS. (boolean)

最后一个参数添加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-29 15:39:58 John

enter link description here

这是使用通过科尔多瓦或PhoneGap的功能到服务器上载多个图像的链接100％的工作方法HTML Java脚本

Multiple Image upload to server in Cordova

来源

2017-09-14 06:13:56

想要上传图片到服务器使用phonegap android

回答

相关问题