Ionic/Angular JS - Formular mit Bild an PHP senden

Question

Ich baue eine Mobile App mit Ionic/Angular JS. Auf einer bestimmten Registerkarte kann der Benutzer ein Formular ausfüllen und ein Bild mit ngCordova Camera Plugin auswählen und das Formular senden. Ich möchte alle Formulardetails an www.mydomain.com/receive.php senden.

Hier ist, wie meine HTML-Datei für die jeweiligen Registerkarte wie folgt aussieht:

<ion-view view-title="Form"> 
    <ion-content> 
    <div class="list"> 
     <div class="item item-divider"> 
      Personal Details 
     </div> 
     <label class="item item-input"> 
      <span class="input-label">Name</span> 
      <input name="fname" type="text" placeholder="John"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Surname</span> 
      <input name="lname" type="text" placeholder="Smith"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Email</span> 
      <input name="email" type="email" placeholder="john.smith@gmail.com"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Phone</span> 
      <input name="phone" type="tel" placeholder="555234567"> 
     </label> 
     <div class="item item-divider"> 
      Location 
     </div> 
     <button class="button button-full button-balanced" ng-click="getLocation()"><i class="ion-android-locate"></i> Get my location</button> 
     <label class="item item-input"> 
      <span class="input-label">Street</span> 
      <input name="street" type="text" ng-model="pStreet.value"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Number</span> 
      <input name="number" type="text" ng-model="pNumber.value"> 
     </label> 
     <label class="item item-input hidden"> 
      <span class="input-label">Lat</span> 
      <input name="lat" type="text" ng-model="pLat.value"> 
     </label> 
     <label class="item item-input hidden"> 
      <span class="input-label">Lng</span> 
      <input name="lng" type="text" ng-model="pLng.value"> 
     </label> 
     <label class="item item-input hidden"> 
      <span class="input-label">Address</span> 
      <input name="address" type="text" ng-model="pAddress.value"> 
     </label> 
     <div class="item item-divider"> 
      Photo 
     </div> 
     <div class="item"> 
      <div class="row"> 
      <div class="photo"> 
       <button ng-click="selectPicture()">Select Picture</button> 
       <img id="myImage" style="width: 100%; height: auto;"/> 
      </div> 
      </div> 
     </div> 
     <button class="button button-full button-positive" ng-click="">Send form</button> 
     </div> 
    </ion-content> 
</ion-view> 

Und hier ist die Controller-JS für die Registerkarte:

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile) { 

    $scope.getLocation = function() { 
    $ionicLoading.show({ 
     templateUrl: 'loading.html', 
     hideOnStateChange: true 
    }); 
     var posOptions = {timeout: 15000, enableHighAccuracy: true}; 
     $cordovaGeolocation 
     .getCurrentPosition(posOptions) 
     .then(function (position) { 
     $scope.lat = position.coords.latitude; 
     $scope.lng = position.coords.longitude; 
     $scope.pLat = {value: $scope.lat}; 
     $scope.pLng = {value: $scope.lng}; 

     var geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng($scope.lat, $scope.lng); 
     var request = { 
      latLng: latlng 
     }; 

     geocoder.geocode(request, function(data, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      if (data[0] != null) { 
       $scope.$apply(function() { 
       $scope.pStreet = {value: data[0].address_components[0].types[0] === 'route' ? data[0].address_components[0].long_name : data[0].address_components[1].long_name}; 
       $scope.pNumber = {value: data[0].address_components[0].types[0] === 'street_number' ? data[0].address_components[0].long_name : ''}; 
       $scope.pAddress = {value: data[0].formatted_address}; 
       setTimeout(function() { 
        $ionicLoading.hide(); 
       }, 500); 
       }); 
      } else { 
       setTimeout(function() { 
       $ionicLoading.hide(); 
       }, 500); 
      } 
      } 
     }) 
     }); 
    }; 

    $scope.selectPicture = function() { 

     var options = { 
     quality: 90, 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
     allowEdit: false, 
     encodingType: Camera.EncodingType.JPEG, 
     popoverOptions: CameraPopoverOptions, 
     saveToPhotoAlbum: false, 
     correctOrientation: true 
     }; 

     $cordovaCamera.getPicture(options).then(function(imageData) { 
     var image = document.getElementById('myImage'); 
     image.src = "data:image/jpeg;base64," + imageData; 
     }, function(err) { 
     // err 
     }); 

    } 

}) 

Ich bin ein noob, wenn wir sprechen über Ionic/Angular (Experte für PHP, darum werde ich mich kümmern). Wie kann ich meine Formulardetails einschließlich des imageDates an PHP übergeben?

Answer 1

Andrei.

Sie müssen jedes HTML-Eingabemodell binden. Ex.

<label class="item item-input"> 
     <span class="input-label">Name</span> 
     <input name="fname" type="text" placeholder="John" ng-model="myForm.fname"> 
    </label> 
    <label class="item item-input"> 
     <span class="input-label">Surname</span> 
     <input name="lname" type="text" placeholder="Smith" ng-model="myForm.lname"> 
    </label> 

Ihr Controller.

$cordovaCamera.getPicture(options).then(function(imageData) { 
    var image = document.getElementById('myImage'); 
    image.src = "data:image/jpeg;base64," + imageData; 

    // You want to send the data 
    $rootScope.data = { 
     src : "data:image/jpeg;base64," + imageData, 
     fname : $scope.myForm.fname, 
     lname : $scope.myForm.lname 
    } 
    }, function(err) { 
    // err 
    }); 

Ihre $ http.

var url = "www.mydomain.com/receive.php"; 
     $http({ 
     method: 'POST', 
     data: $rootScope.data, 
     url: url 
     }). 
     then(function (response) { 
     //ok 
     }, function (response) { 
     //fail 
     }); 

Ihr PHP.

$src = $_REQUEST['src']; 
$fname = $_REQUEST['fname']; 
$lname = $_REQUEST['lname']; 

Dieser Code kann Ihre Bilder speichern.

$base64_string_img = $src; 
    $data = explode(',', $base64_string_img); 
    $filename_path = md5(time() . uniqid()) . ".jpg"; 
    $decoded = base64_decode($data[1]); 
    file_put_contents("uploads/" . $filename_path, $decoded); 

Answer 2

wir ein Plugin verwenden, das zu tun, dann ist es der einfachste Weg: https://github.com/apache/cordova-plugin-file-transfer

Pro Dokumentation:

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

var fail = function (error) { 
    alert("An error has occurred: Code = " + error.code); 
    console.log("upload error source " + error.source); 
    console.log("upload error target " + error.target); 
} 

var options = new FileUploadOptions(); 
options.fileKey = "file"; 
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1); 
options.mimeType = "text/plain"; 

var params = {}; 
params.value1 = "test"; 
params.value2 = "param"; 

options.params = params; 

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