Tiny File Manager

Back Back Up Advanced Editor

<!--

voir ???

https://www.codexworld.com/upload-multiple-files-with-javascript-using-php/

formData.append("files[]", fileInput.files[i]);
-->

<div id="file_count"></div>
	
	
	
	<form id="form_transfert_fichier" name="form_transfert_fichier" enctype="multipart/form-data">
	
		<input type="file" id="uploadFile" name="fichiers_transfert[]" multiple="multiple" />
	
	
		<br>
		<br>
		<button onclick="uploadFiles()">Upload</button> 
		
		
		
		<input type="button" value="Envoi" onclick="debug();" /> 
	
	</form>
	
	<div id="upload_prev"></div>

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

<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>

var fileCount = 0;

var xhr

function sendFile()
		{
			document.getElementById("server_response").innerHTML = "";//clear previous server response
			
			var url = "upload_files.php";
			
			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 = xhr.responseText;
					
					alert(xhr.responseText);
					
				}
			}

var formData = new FormData();
			formData = traitement();
			
			console.log(" +++++++++++++++++++++ ");
			
			for (let keyValue of formData.entries())
			{
				console.log(keyValue);
			}
			
			for (var newfile of formData.getAll('file'))
			{
				console.log(newfile.name);
				console.log(newfile.size);
			}  
			
			
						
			xhr.send(formData); 
		}

function envoi()
{

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 uploadFiles() 
{
           // var fileInput = document.getElementById('fileUpload');
           // var files = fileInput.files;
		   
		    /*var files = uploadFile.files;

var inp = document.getElementById('uploadFile');
			for (var i = 0; i < inp.files.length; ++i) 
			{
				var name = inp.files.item(i).name;
				console.log("here is a file name: " + name);
				
				traitement(files[i], name,  i)
				
				
			}*/
			//traitement();
			
			const uploadForm = document.querySelector('form_transfert_fichier');
			
			console.log("message ..." + uploadForm);
}

//function traitement(file, name, indice)

function query()
{

//form_transfert_fichier

//var inp = document.getElementById('form_transfert_fichier');
	
	//console.log("inp");
	
	
	// const formData = new FormData('form_transfert_fichier')
     //   console.log(formData);
	
	// form_transfert_fichier
	
	console.log("message");
	
	
	/*for (let keyValue of formData.entries())
			{
				console.log(keyValue);
			}
			
			*/
}

function xhr_send(data)
{

document.getElementById("server_response").innerHTML = "";//clear previous server response
			
			var url = "upload_files.php";
			
			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 = xhr.responseText;
					
					alert(xhr.responseText);
					
				}
			}
						
			xhr.send(data);

}

function getMimeTypeFromExtension(extension = "txt")
 {
    if (extension[0] === ".") 
	{
        extension = extension.substr(1);
    }
    return {
        "aac": "audio/aac",
        "abw": "application/x-abiword",
        "arc": "application/x-freearc",
        "avi": "video/x-msvideo",
        "azw": "application/vnd.amazon.ebook",
        "bin": "application/octet-stream",
        "bmp": "image/bmp",
        "bz": "application/x-bzip",
        "bz2": "application/x-bzip2",
        "cda": "application/x-cdf",
        "csh": "application/x-csh",
        "css": "text/css",
        "csv": "text/csv",
        "doc": "application/msword",
        "docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        "eot": "application/vnd.ms-fontobject",
        "epub": "application/epub+zip",
        "gz": "application/gzip",
        "gif": "image/gif",
        "htm": "text/html",
        "html": "text/html",
        "ico": "image/vnd.microsoft.icon",
        "ics": "text/calendar",
        "jar": "application/java-archive",
        "jpeg": "image/jpeg",
        "jpg": "image/jpeg",
        "js": "text/javascript",
        "json": "application/json",
        "jsonld": "application/ld+json",
        "mid": "audio/midi audio/x-midi",
        "midi": "audio/midi audio/x-midi",
        "mjs": "text/javascript",
        "mp3": "audio/mpeg",
        "mp4": "video/mp4",
        "mpeg": "video/mpeg",
        "mpkg": "application/vnd.apple.installer+xml",
        "odp": "application/vnd.oasis.opendocument.presentation",
        "ods": "application/vnd.oasis.opendocument.spreadsheet",
        "odt": "application/vnd.oasis.opendocument.text",
        "oga": "audio/ogg",
        "ogv": "video/ogg",
        "ogx": "application/ogg",
        "opus": "audio/opus",
        "otf": "font/otf",
        "png": "image/png",
        "pdf": "application/pdf",
        "php": "application/x-httpd-php",
        "ppt": "application/vnd.ms-powerpoint",
        "pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
        "rar": "application/vnd.rar",
        "rtf": "application/rtf",
        "sh": "application/x-sh",
        "svg": "image/svg+xml",
        "swf": "application/x-shockwave-flash",
        "tar": "application/x-tar",
        "tif": "image/tiff",
        "tiff": "image/tiff",
        "ts": "video/mp2t",
        "ttf": "font/ttf",
        "txt": "text/plain",
        "vsd": "application/vnd.visio",
        "wav": "audio/wav",
        "weba": "audio/webm",
        "webm": "video/webm",
        "webp": "image/webp",
        "woff": "font/woff",
        "woff2": "font/woff2",
        "xhtml": "application/xhtml+xml",
        "xls": "application/vnd.ms-excel",
        "xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "xml": "application/xml",
        "xul": "application/vnd.mozilla.xul+xml",
        "zip": "application/zip",
        "3gp": "video/3gpp",
        "3g2": "video/3gpp2",
        "7z": "application/x-7z-compressed"
    }[extension] || "application/octet-stream";
}
</script>