I'm not sure why the my code below doesn't handle any files that larger than 50kb on my hosting though I works fine on localhost.

I tested many different file sizes and I'm pretty sure 50kb is its limit. If a file is larger than 50kb, it is never passed to process.php. If a file is smaller than 50kb, it would be passed to process.php ok.

Is there anyone can help me to fix this. I have been stuck in this problem for hours.

I did set upload_max_filesize in php.ini to 5M.

$( document ).ready(function() {
    $('#img_uploader').on('change', function()
    {
       uploadFiles(this.files);
    }
});

function uploadFiles(fileList)
{
    var xhr = new XMLHttpRequest();
    var formData = new FormData();

    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        if (!file.type.match('image.*')) {
            continue;
        }
        formData.append('photos[]', file);
        formData.append('request', "uploadImg");
    }

    xhr.open('POST', 'process.php', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            var data = xhr.responseText;
            console.log(data);
            //convert_json_append_HTML(data);
        } else {
            alert('An error occurred!');
        }
    };
    xhr.send(formData);
}

Updated: Test results

I had spent 6 hours just to locate the problem.

This is really weired.

1/ 4 hours to review all Javascript and PHP code, logged every step to make sure nothing was wrong with the code.

• Tested on localhost with all scenarios. It worked perfectly.

2/ Changed these three varables didn't fix the problem regardless what limit I set. So I changed them to default.

• upload_max_filesize
• memory_limit
• post_max_size

3/ Browser test:

Created 2 files: test_1.php and test_2.php. (basic HTML, no Javascript involved)

test_1.php

<form action="test2.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

test_2.php

<?php
var_dump($_FILES);

HTTP:

Chrome:

• Files < 50kb: passed
• Files > 50kb: passed

Firefox:

• Files < 50kb: passed
• Files > 50kb: passed

Internet Explorer:

• Files < 50kb: passed
• Files > 50kb: passed

HTTPS

Chrome:

• Files < 50kb: passed
• Files > 50kb: failed

Firefox:

• Files < 50kb: passed
• Files > 50kb: passed

Internet Explorer:

• Files < 50kb: passed
• Files > 50kb: passed

I'm not sure why the file larger than 50kb can not be passed from test_1.php to test_2.php on HTTPS protocol with Chrome. Is there anyone here know the reason? Or can try to test it on your own server.

I'm not sure why the my code below doesn't handle any files that larger than 50kb on my hosting though I works fine on localhost.

I tested many different file sizes and I'm pretty sure 50kb is its limit. If a file is larger than 50kb, it is never passed to process.php. If a file is smaller than 50kb, it would be passed to process.php ok.

Is there anyone can help me to fix this. I have been stuck in this problem for hours.

I did set upload_max_filesize in php.ini to 5M.

$( document ).ready(function() {
    $('#img_uploader').on('change', function()
    {
       uploadFiles(this.files);
    }
});

function uploadFiles(fileList)
{
    var xhr = new XMLHttpRequest();
    var formData = new FormData();

    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        if (!file.type.match('image.*')) {
            continue;
        }
        formData.append('photos[]', file);
        formData.append('request', "uploadImg");
    }

    xhr.open('POST', 'process.php', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            var data = xhr.responseText;
            console.log(data);
            //convert_json_append_HTML(data);
        } else {
            alert('An error occurred!');
        }
    };
    xhr.send(formData);
}

Updated: Test results

I had spent 6 hours just to locate the problem.

This is really weired.

1/ 4 hours to review all Javascript and PHP code, logged every step to make sure nothing was wrong with the code.

• Tested on localhost with all scenarios. It worked perfectly.

2/ Changed these three varables didn't fix the problem regardless what limit I set. So I changed them to default.

• upload_max_filesize
• memory_limit
• post_max_size

3/ Browser test:

Created 2 files: test_1.php and test_2.php. (basic HTML, no Javascript involved)

test_1.php

<form action="test2.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

test_2.php

<?php
var_dump($_FILES);

HTTP:

Chrome:

• Files < 50kb: passed
• Files > 50kb: passed

Firefox:

• Files < 50kb: passed
• Files > 50kb: passed

Internet Explorer:

• Files < 50kb: passed
• Files > 50kb: passed

HTTPS

Chrome:

• Files < 50kb: passed
• Files > 50kb: failed

Firefox:

• Files < 50kb: passed
• Files > 50kb: passed

Internet Explorer:

• Files < 50kb: passed
• Files > 50kb: passed

I'm not sure why the file larger than 50kb can not be passed from test_1.php to test_2.php on HTTPS protocol with Chrome. Is there anyone here know the reason? Or can try to test it on your own server.

• javascript
• jquery
• ajax
• file-upload

• checked the web server error log files? – Spacedman Commented Dec 23, 2016 at 7:39
• Any errors that you get? You can check browser console, server's access logs. – Anurag Sinha Commented Dec 23, 2016 at 7:47
• There are 3 variables you need to check , upload_max_filesize, memory_limit, and post_max_size. For file upload all 3 e into the picture. – GeekAb Commented Dec 23, 2016 at 7:47

4 Answers 4

You need to set desired values for 3 variables Check this tutotial

• upload_max_filesize
• memory_limit
• post_max_size

I figured out the issue.

Kaspersky Internet Security automatically injects a script into any webpages loaded with Chrome (IE, and FF are not affected).

The script blocks any package larger than 50kb sent to web server on HTTPS protocol.

• Solutions: Kaspersky Internet Security > Settings > Additional > Network >

  • Uncheck "Inject script into web traffic to interact with web pages"

I same have like this problem and fixed by changing post_max_size in php.ini, In my case default is 8 MB increase to 20 MB, It's work!

In my case turns out that upload_max_filesize, memory_limit, post_max_size in php.ini were set to the minimum below 20M, this can cause ajax not to send the request to the server's PHP file.