2013-07-03 15 views
14

Sto facendo un progetto in Android PhoneGap e voglio caricare le foto sul server.voglio caricare una foto sul server usando phonegap in android

Ma non mi viene un'idea, dove dovrei inserire questo codice.

Non riesco a visualizzare alcun pulsante per caricare le foto, per favore aiuto.

Sono nuovo in questo. Ho controllato questo codice dalla documentazione di PhoneGap.

Sto provando questo per ore, ma non riesco a ottenere la soluzione migliore.

È il mio primo progetto Android PhoneGap.

Codice:

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

Errore: Impossibile trovare variabile: FileUploadOptions – nick

risposta

10

a risolvere il problema utilizzando il codice seguente:

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

Tutte le informazioni su questo post: https://stackoverflow.com/a/13862151/1853864

+0

thankz alot it funziona – Manu

+2

Grazie. È correttamente funzionato. Ma abbiamo bisogno di caricare più immagini. Per favore dammi un'idea per caricare più immagini utilizzando questo trasferimento di file cordova. – Sathiyaraj

+0

Mi spiace fratello :(Non posso aiutarti ma penso che non puoi caricare più immagini utilizzando il trasferimento file. Quando ho trovato questa soluzione, ho utilizzato un plug-in e un codice nativo per Android e iOS. –

0

Questa è un'applicazione di esempio che ho fatto di caricare una foto per server di

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

Spero che questo aiuti

Grazie AB

+0

plz proive alcuni pulsanti per chiamare dis caricati funzione – Manu

+1

Bind che funzionano a qualche tasto! Crearne uno ! ;) – MAST3RMIND

+0

ya l'ho fatto ma nessun avviso win o fail visualizzato – Manu

5

Prova quanto segue codice.

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

Creare un pulsante nella pagina HTML, su esso è onclick chiamata evento le seguenti funzioni secondo il vostro requisito.

  • Chiama la funzione capturePhoto() per acquisire e caricare foto.
  • Chiama la funzione getPhoto() per ottenere l'immagine dalla galleria.

HTML deve contenere un pulsanti come:

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

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

Speranza che aiuta.

+0

come, dove e quando chiamare la funzione uploadPhoto (imageURI) e cosa sarà il valore nel parametro imageURI ??? –

+0

@ jolly.exe 'uploadPhoto()' get viene chiamato automaticamente in 'capturePhoto()' callback di successo e imageURI verrà inviato automaticamente. Non devi chiamarlo esplicitamente da nessuna parte. –

+0

Anche io sono di fronte al problema simile ma non riesco a risolverlo. Potete per favore controllare questa domanda stackoverflow.com/questions/40514847 – Ironic

0

bene, è lavoro per me.

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)

L'ultimo parametro aggiunge true come booleano.

Prima

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

Dopo

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