Where am i going wrong in the script below? The back end is PHP. Something seems to be getting uploaded but the PHP script always returns the error below. I'm trying not to use formdata because of older browsers.
Notice: Undefined index: file1 in upload.php on line 2
Notice: Trying to access array offset on value of type null in upload.php on line 2
HTML And Javascript
<!DOCTYPE html>
<html>
<head>
<script>
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
var ajax = new XMLHttpRequest();
console.log(ajax.response);
ajax.open("POST", "upload.php");
ajax.send(file);
}
</script>
</head>
<body>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
</form>
</body>
</html>
PHP
<?php
$fileName = $_FILES["file1"]["name"]; // The file name
?>