title: jQuery HTML5 file drag and drop
body: <p>I have looked at many scripts for uploading images to the server with AJAX with drag and drop. The scripts I found are not jQuery, are quite large and don't do exactly what I want.</p>
  
  <p>In the future it should upload an image with jQuery, AJAX and PHP.</p>
  
  <p><strong>My question</strong></p>
  
  <p>In many of the example I've looked at e.dataTransfer.files work. In my case it don't. Do I need to bind it somehow?</p>
  
  <p>I want jQuery as much as possible.</p>
  
  <p><strong>JsFiddle</strong></p>
  
  <p>Play around as much as you like...</p>
  
  <p><a href="http://jsfiddle.net/AMjEz/" rel="noreferrer">http://jsfiddle.net/AMjEz/</a></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              #dropzone {
                  border: 2px dashed #ccc;
                  width: 300px;
                  height: 200px;
              }
          &lt;/style&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              jQuery(document).ready(function($) {
                  $('#dropzone').on({
                      dragenter: function(e) {
                          $(this).css('background-color', 'lightBlue');
                      },
                      dragleave: function(e) {
                          $(this).css('background-color', 'white');
                      },
                      drop: function(e) {
                          e.stopPropagation();
                          e.preventDefault();
                          console.log(e.dataTransfer.files);
                      }
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="dropzone"&gt;
              Drop files here
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>