title: Progress Bar - gif for php file upload
body: <p>I'm trying to realize a page to upload pdf file to my server with php code.
  No problem with the upload, but I would like to make something visual for users who should see a kind of progress bar.
  Since a real progress bar is a little troublesome, showing an animate gif should be enough.</p>
  
  <p>I've realized a form with an action to load the php file which does the upload, and onsubmit the form calls a function which creates a "layer" with the gif and a message.</p>
  
  <pre><code>&lt;form action = "file_upload.php" method="post" enctype="multipart/form-data" id="upload-form" onSubmit= "Loader()"&gt;
  
  &lt;label for="file"&gt;Filename:&lt;/label&gt;
  &lt;input type="file" name="file" id="file" /&gt;
  &lt;br /&gt;
  &lt;input type="submit" name="submit" value="Submit" /&gt;
  &lt;/form&gt;
  
  
  function Loader (){ 
  
  // Create a white box to cover the page.
  var back = document.createElement('div');
  back.style.backgroundColor = '#ffffff';
  back.style.position = 'fixed';
  back.style.zIndex = '0';
  back.style.left = '0px';
  back.style.top = '0px';
  back.style.right = '0px';
  back.style.bottom = '0px';
  document.body.appendChild(back);
  
  // Add a box to contain the message.
  var box = document.createElement('div');
  box.style.position = 'absolute';
  box.style.zIndex = '1';
  box.style.width = '250px';
  box.style.margin = '15px ' + ((document.body.offsetWidth / 2) - (250 / 2)) + 'px';
  box.style.fontFamily = 'Verdana, Arial, serif';
  document.body.appendChild(box);
  
  
  
  // Add the "Please wait" header
  var message = document.createElement('span');
  message.id = 'loading_header';
  message.style.display = 'block';
  message.style.fontSize = '175%';
  message.style.fontWeight = 'bold';
  message.style.textAlign = 'center';
  message.innerHTML = 'Please wait';
  box.appendChild(message);
  
  // Add the subheader message
  var message = document.createElement('span');
  message.id = 'loading_message';
  message.style.display = 'block';
  message.style.fontSize = '125%';
  message.style.textAlign = 'center';
  message.innerHTML = 'Your files are being uploaded.';
  box.appendChild(message);
  
  // Add a loading image.
  var img = document.createElement('img');
  img.setAttribute('src', './Progress.gif');
  img.style.display = 'block';
  img.style.width = '64px';
  img.style.height = '64px';
  img.style.margin = '15px auto';
  box.appendChild(img);
  
  }
  </code></pre>
  
  <p>The problem is that the upload works, but no gif is displayed, and a bigger problem is that at home it works, but at work it seems to work anymore.</p>
  
  <p>Do you think it can be an internet connection problem? Any Ideas?</p>