I am testing uploading files with Ajax and PHP. The above code succeed without uploading the file why?
{
<form method="post" enctype="multipart/form-data">
<input id='files' type='file'>
</form>
<script>
document.getElementById('files').addEventListener('change', function (e) {
var file = this.files[0];
console.log(file);
var xhr = new XMLHttpRequest();
xhr.file = file; // not necessary if you create scopes like this
xhr.addEventListener('progress', function (e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
}, false);
if (xhr.upload) {
xhr.upload.onprogress = function (e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
}
xhr.onreadystatechange = function (e) {
if (4 == this.readyState) {
console.log(['xhr upload complete', e]);
}
};
xhr.open('post', 'arxeia', true);
xhr.send(file);
}, false);
</script>
</body>}
Do you thing that I should attach a post handler?
you should use FormData to send the file
document.getElementById('files').addEventListener('change', function (e) {
var file = this.files[0];
console.log(file);
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("file", file);
xhr.addEventListener('progress', function (e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
}, false);
if (xhr.upload) {
xhr.upload.onprogress = function (e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
}
xhr.onreadystatechange = function (e) {
if (4 == this.readyState) {
console.log(['xhr upload complete', e]);
}
};
xhr.open('post', 'arxeia', true);
xhr.send(fd);
}, false);
you will then be able to get the file on the server with $_FILES["file"]