Html 5 file upload and how to send a file from a browser to backend

Question

I've seen a few tutorials of how to use Html5 File API such as this https://www.html5rocks.com/en/tutorials/file/dndfiles/ for file uploading. What I want is a few pointers of how to send all that from a browser to backend and process it there to actually upload files. In those tutorials it's not shown.

The backend language doesn't matter.

And I don't want to use an external js library, only pure javascript.

Answer 1

document.getElementById('fileinput').addEventListener('change', function(){
var fd = new FormData();
   for(var i = 0; i<this.files.length; i++){
var file = this.files[i];
fd.append("upload_file"+i, file);
}
uploadFile(fd);
}

function uploadFile(fd){
var url = 'server/index.php';
var xhr = new XMLHttpRequest();

xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        // Every thing ok, file uploaded
        console.log(xhr.responseText); // handle response.
    }
};
xhr.send(fd);
}

Use following HTML.

<input type="file" id="fileinput" multiple="multiple" accept="image/*" />