I have a multiple file upload(images) script, with ajax XMLHttpRequest. I'm testing on mobile browsers, because they will be used. The problem is, that chrome stops when uploading 10-12 images with error:
A php on line 1 $_FILES["file1"].. not defined...
but on chrome I can upload 5 images. Mozilla doesn't have that much(max: 1). On PC the situation is completely different. The chrome uploads much more without error. I'm running the code on my nginx web server at home. Can this be caused by the lack of certain configuration settings?
What can cause such an error? I don't understand these operations. Please, help me!
HTML CODE
<form method="post" id="upload_form" enctypee="multipart/form-data">
<input type="file" name="file1[]" id="file1" multiple><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
JS
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var len = document.getElementById("file1").files.length;
console.log(len);
var formdata = new FormData();
for (var i = 0; i < len; i++) {
formdata.append("file1[]", document.getElementById('file1').files[i]);
}
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
PHP
$lengthFile = count($_FILES["file1"]["name"]);
for($i=0; $i<$lengthFile; $i++)
{
$fileName = $_FILES["file1"]["name"][$i];
$fileTmpLoc = $_FILES["file1"]["tmp_name"][$i];
$fileType = $_FILES["file1"]["type"][$i];
$fileSize = $_FILES["file1"]["size"][$i];
$fileErrorMsg = $_FILES["file1"]["error"][$i];
echo $fileName ."<br>";
if (!$fileTmpLoc) {
echo "ERROR: Please browse for a file before clicking the upload button.";
exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
echo "$fileName upload is complete";
} else {
echo "move_uploaded_file function failed";
}
}
Try to fix typo in your form tag - "enctype" instead of "enctypee"