title: Multiple file drag and drop progress update
body: <p>I'm trying to create a multiple file drag and drop upload, I don't want to use any plugins for jQuery or anything of the sort. The DnD and upload is already working, I'm just trying to change a picture from loading to a check mark upon file upload.</p>
  
  <p>The specific part that I believe not to be working is this <code>$('#'+i).html(data);</code> The data returned is <code>&lt;img src="check.png" /&gt;</code>. I believe the selector <code>$('#'+i)</code> is what is causing the issue.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      $('#drop').change(function(event){
        files = event.target.files;
        $('#drop').css('display', 'none');
        for(var i = 0, len = files.length; i &lt; len; i++) {
          file = files[i];
          if((file.fileName+"").substring((file.fileName+"").length-4,(file.fileName+"").length)=='.mp3'){
          $.ajax({
            type: "POST",
            url: "uploader.php",
            contentType: "multipart/form-data",
            headers: {
              "X-File-Name" : file.fileName,
              "X-File-Size" : file.fileSize,
              "X-File-Type" : file.type
            },
            beforeSend:  function() {
              $('#info').append('&lt;li class="indicator"&gt;&lt;span class="label"&gt;File Name :&lt;/span&gt; '+file.fileName+' | &lt;span class="label"&gt;Size :&lt;/span&gt; ' + file.fileSize + ' | &lt;div id="'+i+'"&gt;&lt;img src="loading.gif" /&gt;&lt;/div&gt;&lt;/li&gt;');
            },
            processData: false,
            data: file,
            success: function(data){
              $('#'+i).html(data);
            },error: function(data){
              $('#info').append('Error: ' + data + '&lt;br /&gt;');
            }
          });
          }else{
            $('#info').append('Error: Incorrect file type. Looking for .mp3');
          }
        }
      });
    });
  &lt;/script&gt;
  </code></pre>