<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload Form</title>
	
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<script type="text/javascript">
	
	
		var _currentI=0;
		
		postSingle=function(){
			 $.ajax({
            type: "POST",
            data: {upload64:$($('.preview')[_currentI]).attr('src')},
            url: "uploadSingleFile.php",
            success: function(data){
               console.log(data.trim()  )
			   
			   $('#hiddenArea').append('<input type="hidden" name="upload64[]" value='+  data.trim() +'>');
			   $($('._row')[_currentI]).find('.status').text('Done');
			   
			   _currentI=_currentI+1;
			   
			   
			   uploadAll();
                }
            });
			
		}
	
		uploadAll=function(){
			
			if($('.preview').length >_currentI )
			{
				postSingle();
			}
		}
		
		$(document).ready(function(){
			
			$("#upload").change(function() {
				$('#imgArea').html('');
				$('#hiddenArea').html('');
				var names = [];
				
				for (var i = 0; i < $(this).get(0).files.length; ++i) {
					  var FR= new FileReader();
					
						
						FR.addEventListener("load", function(e) {
						  $('#imgArea').append('<div class="row _row"><div class="col-md-2"><img class="preview" src='+ e.target.result +' style="width:100px;height:100px"></div> <div class="col-md-01 status">Waiting</div> </div>')
						  //$('#hiddenArea').append('<input type="hidden" name="upload64[]" value='+  e.target.result +'>');
						}); 
						
						var _strim="";
						FR.readAsDataURL( this.files[i] );
					
				}
				$("input[name=file]").val(names);
				$('#upload').val('');
			});
			
		});
	
	</script>
</head>
<body>



<div class="container">

<form action="post1.php" method="post" >
        <h2>Upload File</h2>
		<br>
		Name : <input type="input" name="name" id="name"> <br>
		Files : <input id='upload' name="upload[]" type="file" multiple="multiple" />
		<div id="imgArea"></div>
		<div id="hiddenArea"></div>
		
			 <p><input type="button" onClick="uploadAll()" name="upload" value="Upload Files"></p>
        
         <p><input type="submit"  name="submit" value="Submit"></p>
    </form>
	
</div>

    
</body>
</html>