title: Ajax upload progress bar using jQuery
body: <p>So I don't use jQuery for everything, but I do use it for the good stuff such as AJAX, and right now that son of gun is giving me some issues. Below is a code that should change my upload progress bar while of course uploading.</p>
  
  <pre><code>function uploadProgess(){
      var info = document.getElementById('infor');
      var images = document.getElementsByName('file[]')[0].files; 
      $.ajax({
          beforeSend: function(XMLHttpRequest){
              XMLHttpRequest.upload.addEventListener("progress", function(evt){
                  if (evt.lengthComputable) {
                      document.getElementById('progress-bar').style.display="block";
                      var percentComplete = (evt.loaded / evt.total * 100) + '%';
                  //Do something with upload progress
                      document.getElementById('progress').style.width = percentComplete;
                  }
              }, false); 
          },
          type: 'POST',
          url: "administration.php?mode=styling&amp;part=pics_management",
          data:{method:"upload",file:images},
          success: function(response) {
              info.innerHTML = response;
          },
          error:function(response){
              info.innerHTML = response;
          }
          }).done(function(){
          window.location.href = window.location.href;
      });
  }
  </code></pre>
  
  <p>This function is invoked when we click the submit button of the form.</p>
  
  <pre><code>$('#upload_images').click(function(e){
   e.preventDefault();
   uploadProgess();
   }); 
  </code></pre>
  
  <p>But i am getting <code>Uncaught TypeError: Illegal invocation jQuery.js:4</code> not sure what I did to invoke another property or whatever I did that was "illegal" Can someone explain what is wrong in my code?</p>