    <style>
	
	#container{
	 width: 800px;
     
		margin: 10px;
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
      font-family: Geneva, Arial, Helvetica, sans-serif;
      font-size: .9em; 
	   background-color: #EFEFEF;
	}
	
	#progress_percent
	{
	padding-right: 150px;
	float: right;
	}
	
	    .progressbar {
       border: 1px solid black;
       height: 5px;
       width: 180px;
       margin-top: 7px;
       float: right;
    }
    .progressbar div {
       height: 5px;
       width: 0px;
       background-color: #0000ff;
    }
	
	.numero {
	display:block;
	float:left;
	width:35px;
	height:20px;
	
	}
	
	.nom {
	display:block;
	float:left;
	width:500px;
	height:20px;
	
	
	}
	
	.centrage {text-align: center;}
	
	#global {
	position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
	}
	
	#message {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
	text-align: center;
	
}

	</style>
	
	<script>
	
	    /*
       Wait for window to finish loading, then set event listeners for the body to procress the events
    */
window.onload = function() 
{
			var files = null;
			window.addEventListener('drop',dropEvent,false);
			window.addEventListener('drageneter',preventEvent,false);
			window.addEventListener('dragleave',preventEvent,false);
			window.addEventListener('dragover',preventEvent,false);
}
    /*
       Stop Browser from Navigating to File / Default Handeling
    */
function preventEvent(e)
{
			e.stopPropagation();
			e.preventDefault();
			return false;
}
     
    /*
       When a file is dropped into the browser, the "drop" event listener points to this function.
    */
function dropEvent(e) 
{
			preventEvent(e);
			// Save all dropped files to global variable "files"
			files = e.dataTransfer.files;
			// Check if files were really dropped or not
			if(files.length > 0) 
			{
				// Build an output display to show progress
				var output = '';
				var bg = null;
				for(var i = 0; i < files.length; i++) 
				{
					if(bg == 'background-color:#ffffff;')
						bg = 'background-color:#bbbbbb;'
					else
						bg = 'background-color:#ffffff;';
           
					/*	decalage	   
						output += '<div style="height:20px;' + bg + '">' +
						'<div style="float:left"><strong>' + escape(files[i].name) + '</strong>' +  '</div>' + 
						'<div id="progress_percent-' + i + '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nada</div>' + 
						'<div class="progressbar"><div id="progress-child-' + i + '"></div></div><div style="clear:both"></div></div>';
					*/	 
   
					/*	OK reference
						output += '<div style="height:20px;' + bg + '">' +
						'<div style="float:left"><strong>' + escape(files[i].name) + '</strong>' +  '</div>' + 
						'<div class="progressbar"><div id="progress-child-' + i + '"></div></div>	<div id="progress_percent-' + i + '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>	</div>';
 
					*/
					j = i + 1 ;
					
					//var taille = "--------" + bytesToSize(files[i].size);
					var taille = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + bytesToSize(files[i].size);
					
					
					output += '<div style="height:20px;' + bg + '">' +
					'<div class="numero">  <strong>' + j + '</strong>' +  '</div>' + 
					'<div class="nom">  <strong>' + unescape(files[i].name) + taille + '</strong>' +  '</div>' + 
					
					'<div class="progressbar"><div id="progress-child-' + i + '"></div></div>    	<div id="progress_percent-' + i + '">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</div>   	</div>';
 
				}

				
				document.getElementById('process').innerHTML = '<br/>' + output;
				//document.getElementById('process').innerHTML = output;
				// Call function to upload files, starting at File[0]
				setTimeout(function(){uploadFiles(0);},100);
				
				if(i == files.length -1)
				{
					var e = document.getElementById('message');
					if(e.style.display == 'block')
					{
						e.style.display = 'none';
					}	
					else
					{
						e.style.display = 'block';
					}
				}
				
			}
			
			//document.getelementbyid('message').style.display = "block";
			
			//node = document.getElementById('message');
	        //node.style.visibility = "visible";
			
			//document.getElementById("message").style.visibility='visible';
			//document.getElementById('message').innerHTML = "";
			/*else
			{
				document.getElementById('message').innerHTML = "<br>" + "Fin du Téléchargement :)";
			
				var e = document.getElementById('message');
				if(e.style.display == 'block')
				{
					e.style.display = 'none';
				}	
				else
				{
					e.style.display = 'block';
				}
			return false;
			}*/
			
			return false;
}
     
function uploadFiles(i) 
{
			var req = new XMLHttpRequest();
			var formdata = new FormData();
			req.upload.onprogress = function(e)
			{
				document.getElementById('progress-child-' + i).style.width = (e.position * 100 / e.totalSize) + '%';
				iBytesUploaded = e.loaded;
				iBytesTotal = e.total;
				var iPercentComplete = Math.round(e.loaded * 100 / e.total);
				var iBytesTransfered = bytesToSize(iBytesUploaded);

				document.getElementById('progress_percent-' + i).innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp" + iPercentComplete.toString() + '%';
				//document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';
			}
	
			req.onreadystatechange = function()
			{
				if(req.readyState == 4) 
				{
					// Set Progress to 100% when finished
					document.getElementById('progress-child-' + i).style.width = '100%';
					if(req.status != 200) 
					{
						// Turn Progress Red if Error
						document.getElementById('progress-child-' + i).style.backgroundColor = "#ff0000";
					}

					++i;

					// If more files, upload the next one
					if(i < files.length)
					{
						uploadFiles(i);
					}
					else
					{
						// After all uploads, refresh page
						//window.location.href=window.location.href;
					}
				}
			}
    
			// Create form data for the image so the PHP file can progress it
			formdata.append("image", files[i]);
			req.open("POST","upload91.php",true);
			req.send(formdata);
}

/*function bytesToSize(bytes)
{
			var sizes = ['Bytes', 'KB', 'MB'];
			if (bytes == 0) return 'n/a';
			var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
			return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
}*/


function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    if (i == 0) return bytes + ' ' + sizes[i];
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};



	
	</script>
	
	<html>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <head>
       <title>Image Upload</title>
    
    </head>
    <body>
	
	 <div id="container">
	 
       Glisser içi vos documents à télécharger 
       <div id="process"></div>

	</div>
	 <div id="message"  style="display: none" ></div>  <!--  display:none -->
	
    </body>
    </html>
	
	
<!--	http://geekthis.net/blog/38/html5-uploading-with-progress-bar	-->