使用 javascript XMLHttpRequest 将数据（图像和一些其他参数）发送到 php

Question

This code is proper working i can send username and imgtype with url and images send by using sendAsBinary function and get this data in php but issue is here two parameter username and imgtype that i'm sending with url that get by using GET Method but i want to get in POST method because i don't want to show in url box. I have try to send by using sendAsBinary function but not get in php just image get. Please Help me i'm stuck on this from two days. Thanks!

         var xhr = new XMLHttpRequest();
            var params = "username="+username+"&imgtype="+imgtype;
            xhr.open('POST', upload_url+"?"+params, true);
            var boundary = 'someboundary';
            xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                  alert(this.responseText);
                }
            };
            xhr.sendAsBinary(['--' + boundary, 'Content-Disposition: form-data; name="' + file_input_name + '"; filename="' + filename + '"', 'Content-Type: ' + type, '', data, '--' + boundary + '--','--' + boundary].join('\r\n'));

Answer 1

Using form data you can solve this problem Follow this link click

A full working example is given below

HTML Code

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Username:</label>
  <input type="text"  name="username" placeholder="username" required/>
  <label>File to upload:</label>
  <input type="file" name="userfile" required />
  <input type="submit" value="submit form" />
</form>
<div></div>

Js code

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var outputDiv = document.querySelector("div");
  var dataSendToServer = new FormData(form);



  var requestObject = new XMLHttpRequest();
  requestObject.open("POST", "your_url", true);
  requestObject.onload = function(event) {
    if (requestObject.status == 200) {
      alert(requestObject.responseText)
    } else {
      alert("Error " + requestObject.status + " occurred when trying to upload your file")
    }
  };

  requestObject.send(dataSendToServer);
  ev.preventDefault();
}, false);

PHP code

header("Access-Control-Allow-Origin: *");
        $responseData=array('imgType'=>$_FILES['userfile']['type'],'username'=>$_POST['username']);

        print_r(json_encode($responseData));