Tiny File Manager

Back Back Up Advanced Editor

<!--

https://wiki.hoelee.com/stackoverflow.com_en_all_2023-05/questions/49823584/how-to-get-total-file-size-of-multiple-files-upload-using-jquery

https://stackoverflow.com/questions/49828358/how-to-display-total-file-size-of-multiple-files-upload-using-jquery

-->

<!DOCTYPE html>
<html>
<head>
    <style>
	
	input[type="file"] {

width:100px;

overflow: hidden;

}
	
        .filenameupload {
  width: 98%;
}

#upload_prev {
  border: thin solid #000;
  width: 65%;
  padding: 0.5em 1em 1.5em 1em;
}

#upload_prev span {
  display: flex;
  padding: 0 5px;
  font-size: 12px;
}
    </style>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mess">coucou....</div>
	
	<div id="server_response">Pas de réponse du serveur</div>

var showFileCount = function() 
{
  $('#file_count').text('# Files selected: ' + fileCount);
};

showFileCount();

$(document).on('click', '.close', function() {
  $(this).parents('span').remove();
  fileCount -= 1;
  showFileCount();
})

$('#uploadFile').on('change', function() {

var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  var files = $('#uploadFile')[0].files;
  for (var i = 0; i < files.length; i++) {
    $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + '</div>' + '<p class="close" >X</p></span>');
  }
  fileCount += files.length;
  showFileCount();
});

function xhr_send(data)
{
			document.getElementById("server_response").innerHTML = "tempo....";
			
			var url = "upload_files_base01.php";

var xhr = new XMLHttpRequest();

xhr.open("POST", url, true);

//xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //no longer necessary here

xhr.onreadystatechange = function()
			{
				if(xhr.readyState == 4 && xhr.status == 200)
				{
					document.getElementById("server_response").innerHTML = "retour ..."; //xhr.responseText;
				}
			}

xhr.send(data); 
}

function debug_evolution()
{
			console.log("---->>>>>");
	
			array_valide_file = [];

let numb = document.getElementById("upload_prev").childNodes.length;
			console.log(" ----- " + numb);

var theDiv = document.getElementById('upload_prev').children;
			console.log(" ++++ " + theDiv.length);

for (var i = 0; i < theDiv.length; i++) 
			{
				if (theDiv[i].tagName == 'SPAN')
				{ 
					var pipo = theDiv[i].children;
					console.log(" On a deux éléments dans le span" + pipo.length  );
					array_valide_file.push( pipo[0].innerHTML );
				}
			}

for (i = 0; i < array_valide_file.length; i++)
			{
				console.log("Contenu " + i + "  " + array_valide_file[i] );
			}

var fileInput = document.getElementById('uploadFile');
			
			var formData = new FormData();

for (var i = 0; i < fileInput.files.length; ++i) 
			{
				var name = fileInput.files.item(i).name;
				console.log("here is a file name: " + name);

for (var j = 0; j < array_valide_file.length; ++j) 
				{
					//if( array_valide_file.includes(name) )
					if( name == array_valide_file[j])
					{
						console.log(" Bingo envoi  " + name ); 
						// maintenant on va remplir le nouveau Formdata
						//formData.append("files", fileInput.files[i]);
						formData.append('file', fileInput.files[i]);
					}
					
					
				}
			}

/*for (var pair of formData.entries()) 
			{
				console.log(pair[0]+ ', ' + pair[1]); 
			}*/

for (let keyValue of formData.entries()) 
			{
				console.log(keyValue);
			}

/*for (var newfile of formData.getAll('files'))
			{
				console.log(newfile.name);
				console.log(newfile.size);
			} */

console.log("TRACE....");
			//xhr_send(formData);
			
			
			/*const aliments = ["voiture", "Chocolat", "Pomme"];
			const jsonData = JSON.stringify(aliments);
			
			$.ajax({ url: "upload_files_base01.php", 
					type: "POST", 
					data: { liste : jsonData }, 
					success: function(response) 
					{  
						alert("response");
					} 
					
					});
			*/		
					
		var vehicle = [];
		vehicle.push("aaa");
		vehicle.push("bbb");
		vehicle.push("ccc");
        
    
		$.ajax({
				data:  { vehicle: vehicle },
				type: "post",
				url: "upload_files_base01.php",
				success: function(data)
				{
					alert(data);
				}
		});

}

</script>
</body>
</html>