Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload de fichiers avec AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	
	<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>

<button type="submit">Envoyer</button>
	
</form>

var fileCount = 0;

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();
	});

$(document).ready(function() 
	{
        $('#uploadForm').on('submit', function(event)
		{
			console.log("Superman...");
			
            event.preventDefault(); // Empêche le rechargement de la page
			
			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 concate_file_name = array_valide_file.join();

console.log("--->>> " + concate_file_name);

/************* deplacer *****************/			
            //const stringData = $('#stringData').val();
			const listeFile = $('#uploadFile')[0].files;
            
			const formData = new FormData();
            
            formData.append('stringData', concate_file_name);

for (let i = 0; i < listeFile.length; i++) 
			{
                formData.append('files[]', listeFile[i]);
            }
			
			for (let keyValue of formData.entries()) 
			{
				console.log(keyValue);
			}
			
/*******************************/

// Envoie la requête AJAX
            $.ajax({
                url: 'upload_file01.php', // Remplace par le chemin vers ton script PHP
                type: 'POST',
                data: formData,
                processData: false, // Ne pas traiter les données
                contentType: false, // Ne pas définir le type de contenu
                success: function(response) {
                    console.log('Réponse du serveur :', response);
                },
                error: function(xhr, status, error) {
                    console.error('Erreur :', error);
                }
            });
			
/*			
			$.ajax({
				data:  { file_liste: array_valide_file },
				type: "post",
				url: "create_fichier.php",
				success: function(data)
				{
					alert(data);
					
					const listeFile = $('#uploadFile')[0].files;
            		const formData = new FormData();
            		formData.append('stringData', data);

for (let i = 0; i < listeFile.length; i++) 
					{
						formData.append('files[]', listeFile[i]);
					}
					
					$.ajax({
						url: 'upload_file01.php', // Remplace par le chemin vers ton script PHP
						type: 'POST',
						data: formData,
						processData: false, // Ne pas traiter les données
						contentType: false, // Ne pas définir le type de contenu
						success: function(response) 
						{
							console.log('Réponse du serveur :', response);
						},
						error: function(xhr, status, error) 
						{
							console.error('Erreur :', error);
						}
					});
				}
			});
*/
			
        });
		
		
    });
</script>

</body>
</html>