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

2 votes199 views1 answer
Time element html
Html
0 vote204 views1 answer
Site:www.javascriptcn.com como criar uma cal com letras e numeros
Html
24 votes199 views5 answers
Get data tag
Html
14 votes187 views5 answers
How to add telephone number in html
Html
1 vote209 views1 answer
Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Html
0 vote195 views1 answer
Bootstrap 4.5 product grid
Html
0 vote141 views1 answer
Get value from dropdown
Html
7 votes195 views2 answers
How to increaase font size on html
Html
2 votes182 views2 answers
Html empty character
Html
0 vote228 views1 answer
Change td color html
Html