Can't upload files larger than 50kb with AJAX

Question

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.

Answer 1

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

• upload_max_filesize
• memory_limit
• post_max_size

Answer 2

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"