使用 formData 上传 Ajax 文件在大文件上失败

Question

I'm sending via ajax a FormData object containing uploads files but when I try to upload large files (> 5M), I receive empty $_POST and $_FILES variables.

Reading so much posts about this issue I applied almost everything but didn't work.

I've tried on php.ini:
- max_execution_time = 300
- max_input_time = 300
- post_max_size = 2048M (large but compulsory)
- upload_max_filesize = 2048M (large but compulsory)
- max_input_vars = 2000 (trying different values)

On HTTP/HTTPS directives (some have no sense but I was trying in a desperately way to see the behaviour):
- FcgidConnectTimeout 300
- FcgidIOTimeout 300
- FcgidIdleTimeout 300
- FcgidBusyTimeout 300
- IPCCommTimeout 9999
- FcgidMaxRequestLen 21474836480

My code looks as follows:

var form = $('form[name="myform"]');
var formData = new FormData(form[0]);

/*
Also tried this:
   var file = $("form[name='myform'] input[name='filename']");
   formData.append("my_upload", (file[0]).files[0]);
*/

$.ajax({
   type: 'post',
   data: formData,
   dataType: 'json',
   async: true,
   url: '/mysite/controllers/Controller.php',
   processData: false,
   contentType: false,
   ...
});

So, for files < 5M everything works perfect in both my local server and production server. For files > 5M only works on my local server but not in the production server (where I receive empty $_POST and $_FILES variables). They have in general some variables configuration although production server is under a WAF on CloudFlare.

Answer 1

I have the same issue on my setup. I am not using jQuery but vanilla js.

The Problem is not the server! If you have a look into the developer tools of your browser you can see that the HTTP-Request has no form data.

Small Upload <6MB is fine

Big Upload >=6MB doesn't create FormData:

My Code is:

function uploadFile(file, filename, domDirectory, domTabelle, domSchluessel){
var fd = new FormData();
fd.append("filename", filename);
fd.append("name", filename);
fd.append("right_id", domDirectory);
fd.append("tabelle", domTabelle);
fd.append("schluessel", domSchluessel);
var xhr = new XMLHttpRequest();
var reader  = new FileReader();
reader.addEventListener("load", function () {
    fd.append("dataURI", reader.result);
    //console.log(reader.result);
    xhr.send(fd);
  }, false
);
reader.readAsDataURL(file);
xhr.open('POST', '../control/Upload.php', true);
}

Answer 2

Finally I got the reason. Thank you to all of you and sorry for forgetting to explain what happened finally. It was the WAF from CloudFlare!, which limits the upload size to 5M. Yes, that's the reason. So I changed my code to make uploads divided in parts smaller than 5M and then join them again in the server once they are uploaded. I didn't find any better approach but hey, it works!.