want to upload a pic to the server using phonegap in android
You solve your problem using the next code:
<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>See more info on this post:https://stackoverflow.com/a/13862151/1853864
Try the following code.
// A button will call this function// To capture photofunction 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 galleryfunction 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 callbackfunction win(r) { alert("Image uploaded successfully!!");}//Failure callbackfunction fail(error) { alert("There was an error uploading image");}// Called if something bad happens.// function onFail(message) { alert('Failed because: ' + message);}Create a button in your HTML page, on it's onclick event call following functions as per your requirement.
- Call
capturePhoto()function to capture and upload photo. - Call
getPhoto()function to get image from gallery.
HTML should contain a buttons like:
<input name="button" type="button" onclick="capturePhoto()" value="Take Photo"/><input name="button" type="button" onclick="getPhoto();" value="Browse" />Hope that helps.
This is one sample application which I did to upload a pic to server
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); }Hope this helps
ThanksAB