I have the following simple webpage that works for uploading any file:
<html>
<head>
</head>
<body>
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input type="file" name="filefield" id="filefield"><br>
<button type="submit">submit</button>
</form>
</body>
</html>
And the following Ajax version which works with only very small files:
<html>
<head>
</head>
<body>
<script>
function postForm() {
var xhttp = new XMLHttpRequest();
var formData = new FormData();
formData.append("filefield", document.getElementById("filefield").files[0]);
xhttp.open("POST", "upload_file.php", true);
xhttp.send(formData);
}
</script>
<form>
<input type="file" name="filefield" id="filefield"><br>
<button onclick="postForm()">submit</button>
</form>
</body>
</html>
I hven't checked exactly how big a file is too big, but a 100 KB file uploads successfully, while a 2 MB file fails. Wireshark shows that the browser just stops sending the file packets part way through, and sends a FIN flag. The server replies with HTTP status code 200 and PHP error 3 indicating that the file was only partially uploaded. Results are the same on recent versions of IE and Chrome.
Can someone explain why this is happening and what the solution is? Thanks.