title: Create upload status for each file JQuery and AJAX
body: <p>I have a AJAX upload working and all ready to go, there really isnt any information the user can see except a percent and a progress bar. what i want to do is create a div for each file  and show progress for each. Do i have to use flash or can i do this all from jquery because i got the ajax part done all thats left is to make the divs for each file and show a progress bar for each. if i were to upload multiple files it would show 1 progress bar that is uploading all the files together, i want to do it seperate for each. so basicly have one form to select multiple files and create a div for each file to show the percent complete of each.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$('#Submit').click(function(event)
  {
      if ( !("FormData" in window) ) {
          $('#Wrapper').append('&lt;div class="DMsg"&gt;&lt;label class="DText"&gt;You Are Using An Outdated Browser, Please Upgrade To Google Chrome Or Firefox, If You Dont Most Features Will Not Work. Click Anywhere To Dismiss.&lt;/label&gt;&lt;/div&gt;');
          $('#Wrapper').find('.DMsg').hide().slideDown('slow');
          var Close = setTimeout(function()
          {
              $('.DMsg').slideUp('slow', function()
              {
                  $('.DMsg').remove();
              });
          }, 10000);
      }
      else
      {
          function Upload()
          {
              event.preventDefault();
              event.stopPropagation();
  
              var FInput = $('#Files').val();
  
              if(FInput != '')
              {
                  var Data = new FormData();
  
                  var Files = document.getElementById('Files');
  
                  for(var I = 0; I &lt; Files.files.length; ++I)
                  {
                      var FilesName = Files.files[I].name;
  
                      Data.append('File[]', Files.files[I]);
                  }
                  var Request = new XMLHttpRequest();
                  Request.upload.addEventListener('progress', function(event)
                  {
                      if(event.lengthComputable)
                      {
                          Percent = event.loaded / event.total;
                          Progress = document.getElementById('Progress');
                          Loaded = Math.round(Percent * 100);
  
                          $('#Progress').progressbar({
                              value: Loaded
                          });
  
                          $('#Loaded').text(Loaded + '%');
                      }
                      else
                      {
                          $('#Progress').text('There Was An Error Getting The Percent');  
                      }
                  });
  
                  Request.upload.addEventListener('load', function(event)
                  {
  
                  });
  
                  Request.upload.addEventListener('error', function(event)
                  {
                      alert('Upload Failed.');
                  });
  
                  Request.addEventListener('readystatechange', function(event)
                  {
                      if(this.readyState == 4)
                      {
                          if(this.status == 200)
                          {
                              $('#Wrapper').append('&lt;div class="DMsg"&gt;&lt;label class="DText"&gt;Your Files Have Finished Uploading. Click Anywhere To Dismiss.&lt;/label&gt;&lt;/div&gt;');
                              $('#Wrapper').find('.DMsg').hide().slideDown('slow');
                              $('#Loaded').text('100%');
                              $('#Progress').progressbar({
                                  value: 100
                              });
                              var Close = setTimeout(function()
                              {
                                  $('.DMsg').slideUp('slow', function()
                                  {
                                      $('.DMsg').remove();
                                  });
                              }, 10000);
                          }
                          else
                          {
                              $('#Wrapper').append('&lt;div class="DMsg"&gt;&lt;label class="DText"&gt;There Was An Error In Uploading Your Files. Click Anywhere To Dismiss.&lt;/label&gt;&lt;/div&gt;');
                              $('#Wrapper').find('.DMsg').hide().slideDown('slow');
                              var Close = setTimeout(function()
                              {
                                  $('.DMsg').slideUp('slow', function()
                                  {
                                      $('.DMsg').remove();
                                  });
                              }, 10000);
                          }
                      }
                  });
  
                  Request.open('POST', 'Upload.php');
                  Request.setRequestHeader('Cache-Control', 'no-cache');
                  Progress.style.display = 'block';
                  Request.send(Data); 
              }
              else
              {
                  $('#Wrapper').append('&lt;div class="DMsg"&gt;&lt;label class="DText"&gt;Please Select A File / Files. Click Anywhere To Dismiss.&lt;/label&gt;&lt;/div&gt;');
                  $('#Wrapper').find('.DMsg').hide().slideDown('slow');
                  var Close = setTimeout(function()
                  {
                      $('.DMsg').slideUp('slow', function()
                      {
                          $('.DMsg').remove();
                      });
                  }, 10000);
              }   
          }
  
          var EachFile = 0
          $.each($('#Files')[0].files, function()
          {
              ++EachFile;
              Upload();
          });
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="UForm"&gt;
      &lt;form action="" method="post" enctype="multipart/form-data"&gt;
          &lt;input type="file" class="Files" id="Files" name="File[]" /&gt;
          &lt;input type="submit" name="Submit" class="AB" id="Submit" value="Upload!" /&gt;
          &lt;div id="Progress"&gt;&lt;/div&gt;
          &lt;div class="Caption"&gt;&lt;label id="Loaded"&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Sorry for lots of code.</p>