<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">


<script>
function loadFile() {
	// Retrieve the FileList object from the referenced element ID
	var myFileList = document.getElementById('upload_file').files;
 
	// Grab the first File Object from the FileList
	var myFile = myFileList[0];
 
	// Set some variables containing the three attributes of the file
	var myFileName = myFile.name;
	var myFileSize = myFile.size;
	var myFileType = myFile.type;
	
	if(myFileSize > 5000000)
	{
		$( "#message_taille" ).dialog({
								modal: true,
								title: "Infos",
								buttons: {
											Ok: function()
												{
													$( this ).dialog( "close" );
												}
										 }
							});
	}

	else	
	{
		// Alert the information we just gathered
		alert("FileName: " + myFileName + "- FileSize: " + myFileSize + " - FileType: " + myFileType);
 
		// Let's upload the complete file object
		uploadFile(myFile);
	}	
}


function uploadFile(myFileObject) {
	// Open Our formData Object
	var formData = new FormData();
 
	// Append our file to the formData object
	// Notice the first argument "file" and keep it in mind
	formData.append('my_uploaded_file', myFileObject);
 
	// Create our XMLHttpRequest Object
	var xhr = new XMLHttpRequest();
	
	  xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) 
		{
			//document.getElementById("demo").innerHTML = xhttp.responseText;
			
				alert(xhr.responseText);
			
				if(xhr.responseText == 'ok')
				{
	  					$( "#message_succes" ).dialog({
							modal: true,
							title: "Infos",
							buttons: {
										Ok: function()
											{
												$( this ).dialog( "close" );
											}
									 }
						});
	  
				}
				
				if(xhr.responseText == 'existe')
				{
	  					$( "#message_existe" ).dialog({
							modal: true,
							title: "Infos",
							buttons: {
										Ok: function()
											{
												$( this ).dialog( "close" );
											}
									 }
						});
	  
				}
				
				if(xhr.responseText == 'taille')
				{
	  					$( "#message_taille" ).dialog({
							modal: true,
							title: "Infos",
							buttons: {
										Ok: function()
											{
												$( this ).dialog( "close" );
											}
									 }
						});
	  
				}
	  
	  
       }
  };
 
	//xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	//xhr.setRequestHeader("X_FILENAME", file.name);
	// Open our connection using the POST method
	xhr.open("POST", 'traitement_upload.php');
	//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	/*xhr.setRequestHeader("Cache-Control", "no-cache");
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("Content-Type", "multipart/form-data");*/
  /*  xhr.setRequestHeader("X-File-Name", file.fileName);
    xhr.setRequestHeader("X-File-Size", file.fileSize);
    xhr.setRequestHeader("X-File-Type", file.type);*/
	xhr.setRequestHeader("Content-Type", "multipart/form-data");
 
	// Send the file
	xhr.send(formData);
}

</script>

<form action="upload.php" method="post" enctype="multipart/form-data">
    <label>Select a File to Upload</label> <input id="upload_file" type="file" name="upload_file" /> 
    <input type="button" value="Upload" onclick="loadFile()" />
</form>



			<div id="message_succes" style="display: none">
			<p>
			<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
			Copie sur le serveur .
			</p>
			</div>
			
			<div id="message_existe" style="display: none">
			<p>
			<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
			Le fichier existe sur le serveur.
			</p>
			</div>
			
			<div id="message_taille" style="display: none">
			<p>
			<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
			Le fichier est trop gros.
			</p>
			</div>