title: HTML5 JavaScript POST file upload
body: <p>Recently I've been looking into adding a simple HTML5 drag and drop to my already simple php file upload script.
  I have read lots of tutorials and other solutions but I can't seem to understand the whole sending the file to server part.
  From what I understand, XMLHttpRequest will send the data, but it will do it without reloading the page. This, I do not want. Currently the script I'm using will take the POST data and produce the file upload output, eg. server download link, thumbnail if image etc.</p>
  
  <p>How can I have the drag and drop submit the POST data and either access the upload output or reload the page?</p>
  
  <p>Edit:
  I'm using the following for the drag and drop:</p>
  
  <pre><code>    &lt;div id="drop_zone"&gt;Drag and drop a file here&lt;/div&gt;
  
      &lt;script&gt;
            function handleFileSelect(evt) {
              evt.stopPropagation();
              evt.preventDefault();
  
              var files = evt.dataTransfer.files; // FileList object.
  
  
              uploadFile(files[0]); //&lt;-- This is where most examples will use XMLHttpRequest to construct form and send data
            }
  
          function handleDragOver(evt) {
              evt.stopPropagation();
              evt.preventDefault();
              document.getElementById('drop_zone').style.backgroundColor = "#faffa3";
              evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
          }
          function handleDragLeave(evt) {
              document.getElementById('drop_zone').style.backgroundColor = "";
          }
  
            // Setup the dnd listeners.
            var dropZone = document.getElementById('drop_zone');
            dropZone.addEventListener('dragover', handleDragOver, false);
            dropZone.addEventListener('drop', handleFileSelect, false);
            dropZone.addEventListener('dragleave', handleDragLeave, false);                 
      &lt;/script&gt;
  </code></pre>