File upload with progress bar

<center><form id="upload_container" action="upload.php" method="post"><div><label>Upload Image File:</label><input name="userImage" id="userImage" type="file" class="demoInputBox" /></div><br /><div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div><div id="progress-div"><div id="progress-bar"></div></div><div id="targetLayer"></div></form><div id="loader-icon" style="display:none;"><img src="loading.gif" /></div></center>

Source: sourcecodester.com

File upload with progress bar

<script src="js/code_js.js" type="text/javascript"></script> <script src="js/code_js1.js" type="text/javascript"></script> <script type="text/javascript">$(document).ready(function() { 	 $('#upload_container').submit(function(e) {			if($('#userImage').val()) {			e.preventDefault();			$('#loader-icon').show();			$(this).ajaxSubmit({ 				target:   '#targetLayer', 				beforeSubmit: function() {				  $("#progress-bar").width('0%');				},				uploadProgress: function (event, position, total, percentComplete){						$("#progress-bar").width(percentComplete + '%');					$("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')				},				success:function (){					$('#loader-icon').hide();				},				resetForm: true 			}); 			return false; 		}	});}); </script>

Source: sourcecodester.com

Similar codes

1 vote219 views1 answer
Bootstrap select dropdown height size
Html
21 votes237 views1 answer
Phone screen size fix html meta
Html
58 votes221 views2 answers
How to import font awesome in html
Html
2 votes211 views1 answer
A go to section
Html
0 vote218 views1 answer
Bootstrap align right button
Html
1 vote218 views1 answer
How to convert a html canvas into a png file
Html
2 votes232 views1 answer
Make text blue html
Html
12 votes233 views3 answers
Loopback relations include inside include
Html
1 vote216 views1 answer
How to put custom tab name in html
Html
0 vote223 views1 answer
How to get a adminitration password for filezilla server
Html