jQuery-使用ajax的DataTables上传文件

Question

I am using the plugin datatable to show a list of users. In this list I need to be able to upload new files.

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.

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 DataTable that do not recognise my form data.

Anyone knows how to achieve this?

FIDDLE

JS

$('#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);
    }
  });

PHP

$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;

Answer 1

Change your JQuery code to:

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

var url = "example/upload.php?type=photo"
var form = $(this).closest("form").get(0);

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

});

Your question explains here