jQuery - DataTables upload file using ajax
<p>I am using the plugin <code>datatable</code> to show a list of users. In this list I need to be able to upload new files. </p>

<p>I am trying to use ajax to try to send data to php. If I send value there is not problem my php script works however, I cannot get the data from the files. </p>

<p>In order to upload the files I am using the same script that I have written for another project which is working fine, so I think here the problem is <code>DataTable</code> that do not recognise my form data.</p>

<p>Anyone knows how to achieve this?</p>

<p><a href="https://jsfiddle.net/mau1xuu6/10/" rel="nofollow">FIDDLE</a></p>

<p>JS</p>

<pre><code>$('#example .fileinput-upload-button').on('click', function(event) {

  var td = $(this).closest("td");
  var parentTD = td.parent();

  var form = $(this).closest("form");
var url = "example/upload.php?type=photo"
  var data = new FormData(form);
  alert(form);

  $.ajax({
    type: "POST",
    url: url,
    data: data,
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    dataType: "html",
    processData: false,
    success: function(data) {

      alert(data);
    }
  });
</code></pre>

<p>PHP</p>

<pre><code>$type = filter_input(INPUT_GET, "type");


$target_dir_header = $includesDir . "dashboard/resources/header_pic/";
$dataHeader = $_FILES['input7'];
$dataHeader_ext = explode('/', $dataHeader['type']);
$imageFileType_header = $dataHeader_ext[1];
$target_file_header = $target_dir_header . basename("header" . $imageFileType_header);


echo $type . " - " . $imageFileType_header;
</code></pre>