Basic XHR Upload (JQuery-ish)

xhr_upload.js

  $('#new_file').submit(function(e) {
    e.preventDefault();
    var $this = $(this);
    var file = this.files[0];
    console.log("The file is " + file.fileName + '::' + file.size + '--' + file.type);
    function progess_status(event) {
      var percent = Math.round(event.loaded / event.total * 100);
      console.log(percent);
    }
    function upload_complete(event){
      console.log(event.target.responseText);
    }
    function send_it(file) {
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'file_on_server.json', true);
      xhr.setRequestHeader("X-File-Name", file.name);
      xhr.setRequestHeader("Content-Type", file.type);
      var params = new Object();
      params.file_size = file.size;
      params.file_mime = file.type;
      xhr.setRequestHeader('X-Query-Params', JSON.stringify(params))
      xhr.upload.addEventListener('progress', progess_status, false);
      xhr.addEventListener("load", upload_complete, false);
      xhr.send(file);
    }
    send_it(file);
  });