web-dev-qa-db-fra.com

PhoneGap télécharger l'image sur le serveur lors de l'envoi du formulaire

Je suis confronté à un problème ici car, dans phonegap, l'image est téléchargée sur le serveur une fois que vous avez sélectionné une photo. L'image est automatiquement téléchargée sur le serveur, ce que je ne veux pas. Je souhaite télécharger une image avec le formulaire, où le formulaire contient de nombreux autres champs qu'il est nécessaire d'envoyer avec l'image. Quels sont les moyens possibles de soumettre avec formulaire? 

<!DOCTYPE HTML >
<html>
<head>
<title>Registration Form</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">

    // Wait for PhoneGap to load
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    function onDeviceReady() {
// Do cool things here...
    }

    function getImage() {
        // 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);
        options.mimeType="image/jpeg";

        var params = new Object();
        params.value1 = "test";
        params.value2 = "param";

        options.params = params;
        options.chunkedMode = false;

        var ft = new FileTransfer();
        ft.upload(imageURI, "http://yourdomain.com/upload.php", win, fail, options);
    }

    function win(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        console.log("Sent = " + r.bytesSent);
        alert(r.response);
    }

    function fail(error) {
        alert("An error has occurred: Code = " = error.code);
    }

    </script>
</head>
<body>
<form id="regform">
<button onclick="getImage();">select Avatar<button>
<input type="text" id="firstname" name="firstname" />
<input type="text" id="lastname" name="lastname" />
<input type="text" id="workPlace" name="workPlace" class="" />
<input type="submit" id="btnSubmit" value="Submit" />
</form>
</body>
</html>
imagecordovaupload
10
Navneeth

Créez deux fonctions que vous pouvez appeler séparément. Une fonction pour obtenir uniquement l'image et une autre pour télécharger l'image. 

Vous pouvez faire quelque chose comme ci-dessous.

<!DOCTYPE html>
<html>
  <head>
    <title>Submit form</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

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

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource = navigator.camera.PictureSourceType;
        destinationType = navigator.camera.DestinationType;
    }


    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {

        // Show the selected image
        var smallImage = document.getElementById('smallImage');
        smallImage.style.display = 'block';
        smallImage.src = imageURI;
    }


    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    function uploadPhoto() {

        //selected photo URI is in the src attribute (we set this on getPhoto)
        var imageURI = document.getElementById('smallImage').getAttribute("src");
        if (!imageURI) {
            alert('Please select an image first.');
            return;
        }

        //set upload options
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = imageURI.substr(imageURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";

        options.params = {
            firstname: document.getElementById("firstname").value,
            lastname: document.getElementById("lastname").value,
            workplace: document.getElementById("workplace").value
        }

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

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

    function win(r) {
        console.log("Code = " + r.responseCode);
        console.log("Response = " + r.response);
        //alert("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>
    <form id="regform">
        <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Select Photo:</button><br>
        <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />

        First Name: <input type="text" id="firstname" name="firstname"><br>
        Last Name: <input type="text" id="lastname" name="lastname"><br>
        Work Place: <input type="text" id="workplace" name="workPlace"><br>
        <input type="button" id="btnSubmit" value="Submit" onclick="uploadPhoto();">
    </form>
  </body>
</html>
12
edg

Vous envoyez déjà des champs personnalisés dans votre exemple.

var params = new Object();
params.value1 = "test";
params.value2 = "param";

options.params = params;

Remplissez simplement params avec vos champs de formulaire.

1
Paolo Casciello

J'ai également rencontré le même problème, mais j'ai utilisé deux appels côté serveur en un clic. En cela, lors du premier appel, envoyez les données et obtenez son identifiant dans un rappel à l'aide de JSON, puis chargez l'image à l'aide de cet identifiant. Sur le serveur, données et images mises à jour à l'aide de cet identifiant.

$('#btn_Submit').on('click',function(event) {
   event.preventDefault();
   if(event.handled !== true)
   {
      var ajax_call = serviceURL; 
      var str = $('#frm_id').serialize();                 
      $.ajax({
      type: "POST",
      url: ajax_call,
      data: str,
      dataType: "json",
      success: function(response){
              //console.log(JSON.stringify(response))
        $.each(response, function(key, value) { 
              if(value.Id){                               
                   if($('#vImage').attr('src')){
                         var imagefile = imageURI; 
                          $('#vImage').attr('src', imagefile);
                        /* Image Upload Start */
                          var ft = new FileTransfer();                     
                        var options = new FileUploadOptions();                      
                        options.fileKey="vImage";                      
                        options.fileName=imagefile.substr(imagefile.lastIndexOf('/')+1);
                        options.mimeType="image/jpeg";  
                        var params = new Object();
                        params.value1 = "test";
                        params.value2 = "param";                       
                        options.params = params;
                        options.chunkedMode = false;                       
                        ft.upload(imagefile, your_service_url+'&Id='+Id+'&mode=upload', win, fail, options); 
                      /* Image Upload End */
                   }      
               }

             }); 
          }
     }).done(function() {
          $.mobile.hidePageLoadingMsg();              
     })

   event.handled = true;
  }
  return false;
});

Côté serveur avec PHP 

if($_GET['type'] != "upload"){
  // Add insert logic code
}else if($_GET['type'] == "upload"){
  // Add  logic for image 
  if(!empty($_FILES['vImage']) ){ 
    // Copy image code and update data  
  }
}
1
Ved

Je ne pouvais pas obtenir ces plugins pour télécharger un fichier avec les autres réponses.

Le problème semblait provenir du plugin FileTransfer , qui indique:

fileURL: URL du système de fichiers représentant le fichier sur le périphérique ou un URI de données.

Mais ces non semblent fonctionner correctement pour moi. Au lieu de cela, je devais utiliser le plugin File pour créer un fichier temporaire à l'aide de l'uri de données afin de me procurer un objet blob: dans leur exemple, writeFile est une fonction qui prend une fileEntry (renvoyée par createFile) et dataObj (blob) . Une fois le fichier écrit, son chemin peut être récupéré et transmis à l'instance FileTransfer. On dirait que beaucoup de travail est nécessaire, mais au moins, il télécharge maintenant.

0
bozdoz