使用XHR与FormData无法上传大文件，调整PHP参数仍未解决

Hey there, I’ve been in your exact situation before—tweaking PHP’s size limits only to still hit a wall with big file uploads. Let’s walk through all the possible culprits and fixes step by step:

1. Check PHP’s Timeout & Memory Limits #

Even if your size caps are set to 512MB, large uploads take time to process and use memory. If these values are too low, PHP will abort the upload mid-way.

Update these settings in your php.ini (or via .htaccess if you don’t have access to the main config):

max_execution_time = 300 ; 5 minutes (plenty of time for large uploads)
max_input_time = 300     ; Match execution time
memory_limit = 512M      ; Or higher—processing large files eats up memory

Don’t forget to restart your web server after making changes to php.ini.

2. Verify Web Server Limits #

Your PHP settings might be correct, but your web server (Apache/Nginx) could be enforcing a smaller file size cap behind the scenes.

For Apache: #

Look for the LimitRequestBody directive in your virtual host config or .htaccess file. Set it to a value larger than your target file size (in bytes):

LimitRequestBody 536870912 ; 512MB in bytes

For Nginx: #

In your server block config, add or update client_max_body_size:

client_max_body_size 512M;

Restart Apache/Nginx after adjusting these settings.

3. Adjust XMLHttpRequest Timeout #

Your client-side XHR request might be timing out before the upload finishes. Add a longer timeout or disable it temporarily for testing:

function publishPost() {
  if (!event) { event = window.event; }
  event.preventDefault();
  
  var data = new FormData();
  data.append('SelectedFile', document.querySelector('#post input').files[0]);
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'your-upload-endpoint.php', true);
  
  // Set a 5-minute timeout (300,000 milliseconds)
  xhr.timeout = 300000;
  
  xhr.onload = function() {
    // Handle successful upload response
  };
  
  xhr.ontimeout = function() {
    console.error('Upload timed out—try increasing the timeout value!');
  };
  
  xhr.send(data);
}

4. Double-Check FormData & Input Setup #

Make sure your file input is properly configured:

• The input has type="file"
• It has a name attribute matching what your PHP script expects (you’re using SelectedFile, so the input should have name="SelectedFile")
• You’re correctly appending the file to FormData (your snippet cuts off, but ensure it’s files[0] with no typos)

5. Implement Chunked Uploads (If All Else Fails) #

If you’re still hitting hard limits, splitting the file into smaller chunks (like 10MB each) and uploading them sequentially is a foolproof workaround. Here’s a quick outline:

Client-Side Chunking: #

function uploadChunk(file, start, end, chunkIndex, totalChunks) {
  var chunk = file.slice(start, end);
  var formData = new FormData();
  formData.append('fileChunk', chunk);
  formData.append('fileName', file.name);
  formData.append('chunkIndex', chunkIndex);
  formData.append('totalChunks', totalChunks);
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'chunk-upload.php', true);
  xhr.onload = function() {
    if (chunkIndex < totalChunks - 1) {
      // Upload next chunk
      uploadChunk(file, end, end + 10*1024*1024, chunkIndex + 1, totalChunks);
    } else {
      // All chunks uploaded—trigger server-side reassembly
      fetch('reassemble-file.php', {
        method: 'POST',
        body: JSON.stringify({ fileName: file.name })
      });
    }
  };
  xhr.send(formData);
}

// Initialize chunked upload
var file = document.querySelector('#post input').files[0];
var chunkSize = 10 * 1024 * 1024; // 10MB chunks
var totalChunks = Math.ceil(file.size / chunkSize);
uploadChunk(file, 0, chunkSize, 0, totalChunks);

Server-Side Reassembly (PHP): #

In chunk-upload.php, save each chunk to a temporary directory. Then in reassemble-file.php, concatenate all chunks into the final file and delete the temporary chunks.

Final Quick Tips #

• Test with a file just over 50MB to confirm which fix resolves the issue
• Check your web server error logs (Apache: /var/log/apache2/error.log, Nginx: /var/log/nginx/error.log)—they’ll often tell you exactly what’s blocking the upload
• If you’re on a shared host, some providers enforce hard limits even if you modify php.ini—you might need to reach out to their support team

内容的提问来源于stack exchange，提问作者Damian Hetman