I'm trying to build a tool on my own website that allows me to upload 50-100 images to my webserver. I been working on this for 1-2 weeks. The problem is, it uploads then it stops all of the sudden and "this.status" = 0 instead of = 200. And then my entire website stops working for like a minute like there's some type of overload.
It was important to have a progress bar. So at first my code uploaded multiples files at the same time which I thought it might be a problem. So I changed it to only upload 1 at a time. Still issues!
<input type="file" multiple id="file-input" accept=".jpg, .jpeg, .png">
<button onclick='The_Function_to_upload();'>Upload</button><br>
<script>
offset_test = 0; // this is the offset of what file to upload
max_files = XXX; // how many files there are. This is populated correctly
function The_Function_to_upload (){ // this function is called when pressing "Upload"
upload_image(offset_test); // This uploads the FIRST FILE ONLY!
}
function upload_image(i_filen) {
var files = document.getElementById("file-input").files; // get the file we're uploading
var formData = new FormData();
formData.append("file", files[i_filen]); // add the file
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "upload.php", true); // the PHP that uploads
xhttp.onreadystatechange = function() { // call on request changes state
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText;
if(response == "File uploaded successfully"){ // if PHP file outputs "File uploaded successfully", it means file was uploaded
offset_test +=1; // increase the offset to next file
if (offset_test==max_files){
alert('completely done'); return; // ALL DONE. END
}
upload_image(offset_test); // upload next file
}else{
alert("File not uploaded: " + response);
}
}
};
xhttp.send(formData); // Send request with data
}
</script>
You can view my own created log at the bottom.
I even changed the PHP file to only output "File uploaded successfully" so it doesn't even upload. It still stops. I also added a setTimeout to wait 1.5 SECONDS before it calls function upload_image AND IT STILL stops for gods sake. I have no idea why this is happening. Obviously it must be a server problem. But what can I do? :S Please guys, please help me :(
phpinfo() settings:
post_max_size: 128mb
memory_limit: 512mb
max_execution_time: 999999999
max_input_time: 999999999
upload_max_filesize: 1gb
max_input_vars: 1000
--
1. this.readyState: 2
2. this.status: 200
3. this.readyState: 3
4. this.status: 200
5. this.readyState: 4
6. this.status: 200
7. File uploaded: 1 (this means 1st is uploaded)
8. this.readyState: 2
9. this.status: 200
10. this.readyState: 3
11. this.status: 200
12. this.readyState: 4
13. this.status: 200
14. File uploaded: 2 (file 2 has been uploaded)
...
etc
...
15. this.readyState: 2
16. this.status: 200
17. this.readyState: 3
18. this.status: 200
19. this.readyState: 4
20. this.status: 200
21. File uploaded: 41 (this means 41 files been uploaded)
Now try to upload file # 42.
22. this.readyState: 4 (why does this not show 2 and then 3 and jumps to 4 ?)
23. this.status: 0 (why does this show 0 instead of 200 ? )
And here it stops! and sometimes at this point, my ENTIRE website stops working for 30-60 seconds :/ Sometimes it stops at file 43..but it's usually after 40 files it stops.
