title: Drag and drop files but don't automatic upload
body: <p>Would like to have drag and drop and upload the files upon clicking of submit button.
  I know this can be done using :</p>
  
  <pre><code>&lt;input type="file" multiple /&gt;
  </code></pre>
  
  <p>but would like to add style. So far what I've is this <a href="http://jsfiddle.net/raymonn23/Vk38P/1/" rel="nofollow">http://jsfiddle.net/raymonn23/Vk38P/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="file" name="files" id="files" multiple /&gt; 
      &lt;br /&gt;&lt;br /&gt;
      &lt;div id="fileDrop"&gt;
          Drag or Drop your files here
      &lt;/div&gt;
  &lt;/div&gt;    
  &lt;div id="output"&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;
  &lt;input type="submit" value="Upload files onClick me"&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#fileDrop{
      border-style: dotted;
      border-width: 1px;
      padding: 20px;
      text-align: center;
  }
  </code></pre>
  
  <p>JS with Jquery</p>
  
  <pre><code>$("input#files").change(function() {
      var ele = document.getElementById($(this).attr('id'));
      var result = ele.files;
      for(var x = 0;x&lt; result.length;x++){
          var fle = result[x];
          $("#output ul").append("&lt;li&gt;" + fle.name + "(TYPE: " + fle.type + ", SIZE: " + fle.size + ")&lt;/li&gt;");        
      }
  
  });
  </code></pre>
  
  <p>Thanks in advance.</p>