<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Upload and Resize with jQuery and PHP - Demo</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<!--
<script type="text/javascript" src="js/jquery.form.min.js"></script>
-->

<script type="text/javascript">
$(document).ready(function() { 

	var progressbox     = $('#progressbox');
	var progressbar     = $('#progressbar');
	var statustxt       = $('#statustxt');
	var completed       = '0%';
	
	
	
	var options = { 
			target:   '#output',   // target element(s) to be updated with server response 
			beforeSubmit:  beforeSubmit,  // pre-submit callback 
			uploadProgress: OnProgress,
			success:       afterSuccess,  // post-submit callback 
			resetForm: true        // reset the form after successful submit 
		}; 
		
	 $('#upload_form').submit(function() { 
			$(this).ajaxSubmit(options);  			
			// return false to prevent standard browser submit and page navigation 
			return false; 
		});
	
//when upload progresses	
function OnProgress(event, position, total, percentComplete)
{
	//Progress bar
	progressbar.width(percentComplete + '%') //update progressbar percent complete
	statustxt.html(percentComplete + '%'); //update status text
	if(percentComplete>50)
		{
			statustxt.css('color','#fff'); //change status text to white after 50%
		}
}

//after succesful upload
function afterSuccess()
{
	$('#submit-btn').show(); //hide submit button
	$('#loading-img').hide(); //hide submit button

}

//function to check file size before uploading.
function beforeSubmit()
{
    //check whether browser fully supports all File API
   if (window.File && window.FileReader && window.FileList && window.Blob)
	{
		
		
		var fichier = document.getElementById('id_file').value;
		var data = 'fichier='+ fichier;
			
		
		// soumettre
		$.ajax
			({
				type: "POST",
				url: "verif_fichier.php",
				data: data,
				cache: false,
				success: function(html)
				{
					alert(html);
					//document.getElementById('champ_projet').innerHTML = html + bouton;

				
				}
			});
		

		//aucune selection !
		if( !$('#id_file').val()) 
		{
			$("#output").html("File selection ?.");
			return false
		}
		
		var fsize = $('#id_file')[0].files[0].size; //get file size
		var ftype = $('#id_file')[0].files[0].type; // get file type
		
		//fichier possible
		/*switch(ftype)
        {
            case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
                break;
            default:
                $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
				return false
        }*/
		
		var  mega = 1048576;
		var taille_max = mega * 10;
		
		if(fsize > taille_max) 
		{
			$("#output").html("La taille du fichier est limité à 10Mo.");
			return false
		}
		
		//Progress bar
		progressbox.show(); //show progressbar
		progressbar.width(completed); //initial value 0% of progressbar
		statustxt.html(completed); //set status text
		statustxt.css('color','#000'); //initial color of status text

				
		$('#submit-btn').hide(); //hide submit button
		$('#loading-img').show(); //hide submit button
		$("#output").html("");  
	}
	else
	{
		//Output error to older unsupported browsers that doesn't support HTML5 File API
		$("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
		return false;
	}
}

//function to format bites bit.ly/19yoIPO
function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Bytes';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

}); 

</script>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="upload-wrapper">
<div align="center">
		<h3>Upload file</h3>
		<span class="">Image Type allowed: Jpeg, Jpg, Png and Gif. | Maximum Size 5 MB</span>
		
		<form action="processupload.php" onSubmit="return false" method="post" enctype="multipart/form-data" id="upload_form">
		<input name="file" id="id_file" type="file" />
		<input type="submit"  id="submit-btn" value="Upload" />
		<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
		</form>
		
		<div id="progressbox" style="display:none;"><div id="progressbar"></div><div id="statustxt">0%</div></div>

		<div id="output"></div>
</div>
</div>

</body>
</html>