<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Testfile</title>
  </head>
  <body>
      <h1>Prueba de envio de $_FILES para servicios INSERT</h1>
      <form>
          <label for="sessionid">sessionid:</label>
          <input type="text" id="sessionid"/><br><br>
          <label>accountid:</label>
          <input type="text" id="accountid"/><br><br>
          <label>Paymentdate:</label>
          <input type="date" id="paymentdate"/><br><br>
          <label>Amount:</label>
          <input type="text" id="amount"/><br><br>
          <label>paymentaccountid:</label>
          <input type="text" id="paymentaccountid"/><br><br>
          <label>paymentref:</label>
          <input type="text" id="paymentref"/><br><br>
          <label>paymentfile:</label>
          <input type="file" id="paymentfile"/><br><br>
      </form>
    <button type="button" onclick="getJson()">Prueba para envio de archivos/imagenes</button>
  </body>
  <script type="text/javascript">
  function callWS(type, service, params, response){
    var url = service+".php";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
            if (this.readyState === 4) {
                response(this.status, this.responseText);
            }
        };
    switch (type){
        case "GET":
            var parsedPars = Object.keys(params).map(function(k) {
                return encodeURIComponent(k) + '=' + encodeURIComponent(params[k]);
            }).join('&');
            xhttp.open(type.toUpperCase(), url + "?" + parsedPars, true);
            xhttp.send();
        break;
        case "POST":
            xhttp.open("POST", url, true);
            var formdata = new FormData();
            for(var key in params){
                formdata.append(key,params[key]);
            }
            xhttp.send(formdata);
        break;
    }
}

  function getJson(){
      let params = {
          sessionid: document.getElementById('sessionid').value,
          accountid: document.getElementById('accountid').value,
          paymentdate: document.getElementById('paymentdate').value,
          amount: document.getElementById('amount').value,
          paymentaccountid: document.getElementById('paymentaccountid').value,
          paymentref: document.getElementById('paymentref').value,
          paymentfile: document.getElementById('paymentfile').files[0],
    };
    console.log(params);
    callWS("POST","insert", params, respx);

    function respx(status, respText){
      console.log(status);
      console.log(JSON.parse(respText));
    }
  }
  </script>
</html>
