Selezione di più foto dalla galleria di immagini di un dispositivo mediante PhoneGap

Question

Sono riuscito a creare un'applicazione di test basata sull'esempio completo di camera.getPicture nella documentazione di PhoneGap. Mi permette di scattare una foto o recuperare una foto dalla galleria e posizionarla in un div.

Tuttavia, desidero essere in grado di selezionare più immagini dalla galleria e inserirle ciascuna in un proprio div. Qualcuno può indicarmi la giusta direzione per imparare come farlo?

Grazie.

Ecco il javascript che sto utilizzando:

var pictureSource; // picture source 
var destinationType; // sets the format of returned value 

// Wait for PhoneGap to connect with the device 
document.addEventListener("deviceready",onDeviceReady,false); 

// PhoneGap is ready to be used! 
function onDeviceReady() { 
    pictureSource=navigator.camera.PictureSourceType; 
    destinationType=navigator.camera.DestinationType; 
} 

// Called when a photo is successfully retrieved 
function onPhotoDataSuccess(imageData) { 
    var largeImage = document.getElementById('largeImage'); 
    largeImage.style.display = 'block'; 
    largeImage.src = "data:image/jpeg;base64," + imageData; 
} 


function onPhotoURISuccess(imageURI) { 
    var largeImage = document.getElementById('largeImage'); 
    largeImage.style.display = 'block'; 
    largeImage.src = imageURI; 
} 

// A button will call this function 
function capturePhoto() { 
    //add new div 

    var newPhoto = document.createElement("div"); 
    newPhoto.id = "div";   
    newPhoto.className ="photo"; 
    newPhoto.innerHTML = "<img id='largeImage' src='' />"; 
    document.getElementById("photos").appendChild(newPhoto); 


    // Take picture using device camera and retrieve image as base64-encoded string 
    navigator.camera.getPicture(onPhotoDataSuccess, onPhotoURISuccess, onFail, { quality: 50 }); 
} 

// A button will call this function 
function getPhoto(source) { 
    //add new div 



    // Retrieve image file location from specified source 
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
    destinationType: destinationType.FILE_URI, 
    sourceType: source }); 
} 


// Called if something bad happens. 
function onFail(message) { 
    alert('Failed because: ' + message); 

Answer 1

è necessario creare il div in modo dinamico dopo ogni foto è presa. Il vostro successo callback sarebbe qualcosa di simile a questo:

function onPhotoDataSuccess(imageData) { 
    // the following is all one line. 
    document.getElementById("photos").innerHTML+= 
    "<div>\ 
     <img src=\"data:image/jpeg;base64,"+imageData+"\">\ 
    </div>"; 
} 

quindi è possibile lo stile di tutti i imgs tramite CSS utilizzando qualcosa di simile

#photos > div { 
    width: 100px; 
    margin:10px; 
    float:left; 
} 

Answer 2

Come di PhoneGap 3.5 c'è il supporto per la selezione di più immagini lo stesso tempo. Dovrai scrivere o trovare un plug-in che funzioni con il codice nativo per permetterti di farlo. Ecco il problema descritto nel piano di sviluppo di PhoneGap. https://issues.apache.org/jira/browse/CB-1215

Sto lavorando anche a questo. Ecco un link per una soluzione Android.

http://webcache.googleusercontent.com/search?q=cache:http://www.technotalkative.com/android-select-multiple-photos-from-gallery/