~NAXC~

File Content: `imageupload.php`

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>How to Create Multiple Thumbnails While Uploading Image</title>

<link href="vendor/css/style.css" rel="stylesheet">
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/jquery/jquery.form.min.js"></script>

<script>
$(document).on('change', '#image_file_input', function () {   
    var progressBar = $('.progress-bar');
	var bar = $('.progress-bar .bar'); 
	var percent = $('.progress-bar .percent');
    var percentVal;
    $('#image_upload_form').ajaxForm({
        beforeSend: function() {
    			progressBar.fadeIn();
            percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        success: function(html, statusText, xhr, $form) {
			obj = $.parseJSON(html);	
        		if(obj.status){		
        			percentVal = '100%';
        			bar.width(percentVal)
        			percent.html(percentVal);
        			$("#small-preview").prop('src',obj.small);		
        			$("#medium-preview").prop('src',obj.medium);		
        			$("#large-preview").prop('src',obj.large);		
        			$(".img_preview").show();	
        		}    
        }
    }).submit();		

});
</script>
</head>

<body>
	<h2>How to Create Multiple Thumbnails While Uploading Image</h2>
	<br>
	<div id="form-container">
		<div id="imgContainer">
			<form enctype="multipart/form-data" action="image_upload_submit.php"
				method="post" name="image_upload_form" id="image_upload_form">

				<div id="selectImage">
					<div id="imgChange">
						<span>Choose Image</span> <input type="file" accept="image/*"
							name="image_file_input" id="image_file_input">
					</div>
				</div>

				<div class="progress-bar">
					<div class="percent">0%</div>
					<div class="bar"></div>
				</div>
			</form>
		</div>
		<br>
		<div class="img_preview" id="image-holder" style="display: none">
			<img width="150" height="93" id="small-preview" src="#"
				alt="small image" /> <img width="300" height="185"
				id="medium-preview" src="#" alt="medium image" /> <img width="550"
				height="340" id="large-preview" src="#" alt="big image" />
		</div>
	</div>
</body>
</html>
File Content: imageupload.php

File Content: `imageupload.php`
