View Single Post
  #3  
Old 10-27-2011, 07:36 PM
djkfunk is offline djkfunk
Registered User

Join Date: Oct 2011
Posts: 7

Okay, it took a lot of time/trial/error but I found a solution for the progress bar. This is BY FAR the easiest one to implement (I tried many others). It's a combination of Javascript and AJAX, there's very little code, and the best part is it doesn't add any additional pages - which I love because I'm a minimalist.

1. Go to http://www.ajaxload.info/ and generate an image for your progress bar. This site has great choices and allows customization if you want to match your site's colors.

2. Insert this code just before the end of the </head> tag in phUploader.php. If the </head> tag is missing like it was in mine, you can insert it around line 273.

HTML Code:
<script language="javascript" type="text/javascript">
	function loadSubmit() {
	var ProgressImage = document.getElementById('progress_image');
	document.getElementById("progress").style.visibility = "visible";
	setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
	return true;
	}
</script>
3. Insert this code wherever you want the progress bar to show. I put mine below the submit and reset buttons, around line 420 (haha - seriously). (NOTE - If you remove the <p> tag, the progress bar might not stay hidden until you submit, like it's supposed to). Also, you'll notice a reference to the images folder here, so you'll either need to create the directory "images" or change the code to match wherever you put the image.

[HTML]
<p style="visibility:hidden;" id="progress"/><img id="progress_image" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""> Uploading in progress
Reply With Quote