Desea cargar una foto en el servidor usando phonegap en android

Estoy haciendo el proyecto en android phonegap y quiero subir foto al servidor.

Pero no estoy recibiendo idea, ¿dónde debo poner este código.

No puedo mostrar ningún botón para subir fotos, por favor ayuda.

Soy nuevo en esto. Hice referencia a este código de la documentación phonegap.

Estoy tratando esto durante horas, pero no puedo obtener la mejor solución.

Es mi primer proyecto de teléfono androide.

Código:

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

Usted resuelve su problema usando el código siguiente:

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

Ver más información en este post: https://stackoverflow.com/a/13862151/1853864

Pruebe el siguiente código.

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

Cree un botón en su página HTML, en su llamada de evento onclick siguientes funciones según su requisito.

  • Llame a la función capturePhoto() para capturar y subir fotos.
  • Llame a la función getPhoto() para obtener la imagen de la galería.

HTML debe contener un botones como:

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

Espero que ayude.

Esta es una aplicación de ejemplo que hice para subir una foto al servidor

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

Espero que esto ayude

Gracias AB

Bueno, es trabajo para mí.

TrustAllHosts: Parámetro opcional, el valor por defecto es false. Si se establece en true, acepta todos los certificados de seguridad. Esto es útil ya que Android rechaza los certificados de seguridad auto-firmados. No se recomienda para uso en producción. Compatible con Android e iOS. (Boolean)

El último parámetro agrega true como boolean.

antes de

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

Después

 var ft = new FileTransfer(); ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options, true); 
  • PhoneGap Android obtiene el código de la versión de la aplicación
  • Obtener el nivel actual de la batería usando phonegap o cordova?
  • Error en la construcción de aplicaciones para Android usando apache cordova
  • ¿Por qué el audio subido está dañado cuando la subida es claramente exitosa?
  • ¿Cómo utilizar el archivo de tipo de entrada en el teléfono?
  • Cómo incluir archivos jar en el proyecto de la biblioteca android
  • Escotado infinito con marco iónico
  • Phonegap.js bloquea la aplicación Android
  • Phonegap-plugin-facebook-connect: no hay función de devolución de llamada después de FB.Login
  • ¿Cómo construir y desplegar una versión anterior de android para ionic / cordova
  • Cambiar el nombre de la compilación del proyecto android usando cordova
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.