File "index003.html"
Full Path: /home/analogde/www/userlogin/Job/index003.html
File size: 24.52 KB
MIME-type: text/html
Charset: utf-8
<!--
https://www.gyrocode.com/articles/how-to-reset-file-input-with-javascript/
https://www.geeksforgeeks.org/how-to-reset-input-type-file-using-javascript-jquery/
https://laracasts.com/discuss/channels/javascript/js-while-removing-single-file-from-file-input-list-removing-all-files-in-the-list
https://stackoverflow.com/questions/42116909/show-remaining-file-count-when-removing-files-on-multiple-file-upload
https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications
ajax array vers php
https://www.studentstutorial.com/ajax/array_data#google_vignette
-->
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Upload file to server</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style>
.remove-button {
display: inline-block;
margin-left: 10px;
padding: 2px 5px;
border-radius: 3px;
background-color: #ff5f5f;
color: #fff;
font-weight: bold;
cursor: pointer;
}
input[type="file"] {
width:100px;
overflow: hidden;
}
</style>
<script src="js/TimeStructure.js"></script>
<script src="js/SizeStructure.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function myFunction()
{
//alert("TRACE");
document.getElementById("message").innerHTML = "changement...";
}
</script>
<script>
var xhr, hUploadSpeed;
function sendFile()
{
document.getElementById("serverresponse").innerHTML = "";//clear previous server response
var url = "upload.php";
// OK
//var multipleFiles = form_transfert_fichier.querySelector('input[type=file]');
//console.log(multipleFiles);
// OK
//let nbr = multipleFiles.files.length;
//console.log("Nombre de fichier " + nbr);
// OK
//for (let i = 0; i < multipleFiles.files.length; i++)
//{
// console.log(multipleFiles.files[i].name );
//}
//let uploadFormDate = new FormData(form_transfert_fichier);
//console.log(uploadFormDate);
// OK
//var form = this;
//var files = form_transfert_fichier.querySelector('#fileInput').files;
//console.log("Liste " . files);
//var formData = new FormData(document.getElementById("form_transfert_fichier"));
//var inputs = form_transfert_fichier.querySelectorAll('input[type=file]');
//for(let i=0; i<inputs.length; i++)
//{
// let file = inputs[i].files[0];
// console.log(" ** " . file);
// //use file
//}
/*var files = document.getElementById('form_transfert_fichier').files;
for (var x = 0; x < files.length; x++) {
fd.append("fileToUpload[]", files[x]);
}*/
//console.log("++++ " .fd);
console.log("plouf");
//form_transfert_fichier.querySelectorAll('input[type=file]')
//var files = $("#fileInput").get(0).files;
//var fileData = new FormData();
//for (var i = 0; i < files.length; i++) {
// fileData.append("fileInput", files[i]);
//}
//console.log(" <<<>>>> " + formData);
xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', uploadProgress, false);//EventListener for upload progress
xhr.addEventListener('abort', uploadAbort, false);//EventListener for abort
xhr.addEventListener('error', uploadError, false);//EventListener for error
xhr.addEventListener('load', uploadThrough, false);//EventListener for completed upload
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("serverresponse").innerHTML = xhr.responseText;
}
}
var formData = new FormData(form_transfert_fichier);
xhr.send(formData); //Send to server
hUploadSpeed = setInterval(UploadSpeed, 1000); //per seconds
}
/*From here down is same for all the methods, notifications, and other eventListeners*/
var i = new TimeStructure();//creating a TimeStructure object
var j = new SizeStructure();//creating a SizeStructure object
function abort()
{
clearInterval(hUploadSpeed);
xhr.abort();
}
var uploaded = 0, prevUpload = 0, speed = 0, total = 0, remainingBytes = 0, timeRemaining = 0;
function uploadProgress(e)
{
if (e.lengthComputable)
{
uploaded = e.loaded;
total = e.total;
//percentage
var percentage = Math.round((e.loaded / e.total) * 100);
document.getElementById('progress_percentage').innerHTML = percentage + '%';
document.getElementById('progress').style.width = percentage + '%';
document.getElementById("remainingbyte").innerHTML = j.BytesToStructuredString(e.total - e.loaded);//remaining bytes
document.getElementById('uploadedbyte').innerHTML = j.BytesToStructuredString(e.loaded);//uploaded bytes
document.getElementById('totalbyte').innerHTML = j.BytesToStructuredString(e.total);//total bytes
}
}
function uploadAbort()
{
document.getElementById('progress_percentage').innerHTML = '0%';
document.getElementById('progress').style.width = '0px';
document.getElementById("serverresponse").innerHTML = "Transfert annulé";
xhr = null;
}
function uploadError()
{
document.getElementById('progress_percentage').innerHTML = '0%';
document.getElementById('progress').style.width = '0px';
document.getElementById("serverresponse").innerHTML = "Un erreur à interrompu le transfert !.";
clearInterval(hUploadSpeed);
xhr = null;
}
function uploadThrough()
{
document.getElementById('progress_percentage').innerHTML = 'Transfert complet 100%.';
UploadSpeed();//flush
clearInterval(hUploadSpeed);
xhr = null;
}
function UploadSpeed()
{
//speed
speed = uploaded - prevUpload;
prevUpload = uploaded;
document.getElementById("speed").innerHTML = j.SpeedToStructuredString(speed);
//Calculating ETR
remainingBytes = total - uploaded;
timeRemaining = remainingBytes / speed;
document.getElementById("ETR").innerHTML = i.SecondsToStructuredString(timeRemaining);
}
</script>
</head>
<body>
<div class="container">
<div id="buttonContainer"></div>
<button onclick="query()"> Query </button>
<div id="divID"> * * * * * </div>
<p id="demo">zoulou</p>
<!--
const fileList = document.getElementById('file-input').files;
fileList.delete(0);
-->
<form id="form_transfert_fichier" name="form_transfert_fichier" enctype="multipart/form-data">
<table width="100%">
<tr>
<td style="width:100px;">Selection :</td>
<td> ***** <input type="file" id="file1" name="file1" onchange="titi(this.value)"></td>
</tr>
<tr>
<!--
<td>File 2:</td><td><input type="file" id="file2" name="file2"></td>
-->
</tr>
<input type="file" id="fileInput" name="fichiers_transfert[]" multiple />
<button id="resetbtn" type="button"> Reset file </button>
<!--
<input type="file" class="form-control" id="file" name="files[]" multiple />
-->
<!--
<tr>
<td>Your name:</td><td><input type="text" id="uname" name="uname" placeholder="Your name"></td>
</tr>
-->
<tr>
<td></td>
<td><input type="button" value="Envoi" onclick="sendFile();" />
<input type="button" value="Stopper" onclick="abort();" />
</td>
</tr>
</table>
</form>
<div id="progress" style="margin: 10px 5px;"></div>
<br>
<br>
<table border=1 width="100%">
<tr>
<td style="width:250px;">Pourcentage de progression du transfert:</td>
<td><span id="progress_percentage"> 0%</span></td>
</tr>
<tr>
<td>Vitesse:</td>
<td><span id="speed"> 0 bits/s</span></td>
</tr>
<tr>
<td>Temps restant estimé:</td>
<td><span id="ETR"> 0 secondes</span>
</td>
</tr>
<tr>
<td>Données restant à transmettre:</td>
<td><span id="remainingbyte"> 0 bits</span></td>
</tr>
<tr>
<td>Données envoyées:</td>
<td><span id="uploadedbyte"> 0 bits</span></td>
</tr>
<tr>
<td>Taille totale du fichier a envoyé:</td>
<td><span id="totalbyte"> 0 bits</span></td>
</tr>
<tr>
<td>Réponse du serveur:</td>
<td><span id="serverresponse"></span></td>
</tr>
</table>
</div>
<script>
//https://www.jqueryscript.net/form/file-input-preview.html#google_vignette
const container = document.getElementById('buttonContainer');
// Boucle pour générer les boutons
/*for (let i = 1; i <= 5; i++) {
// Crée un nouveau bouton
const button = document.createElement('button');
// Définit l'ID du bouton
button.id = 'button' + i;
// Définit le texte du bouton
button.innerText = 'Bouton ' + i;
button.addEventListener('click', function() {
handleClick(button.id); // Appelle la fonction en passant l'ID
});
// Ajoute le bouton au conteneur
container.appendChild(button);
}*/
var div = document.getElementById('divID');
div.innerHTML = 'Extra stuff';
$(document).ready(function()
{
$('#resetbtn').on('click', function (e)
{
let $el = $('#fileInput');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
const fileInput = document.getElementById('fileInput');
const fileCount = fileInput.files.length;
console.log(`Number of selected files: ${fileCount}`);
//
const noeud = document.getElementById('buttonContainer');
noeud.innerHTML = '';
/*var elements = document.getElementById('buttonContainer').children;
for (i = 0; i <= elements.length - 1; i++)
{
console.log(" ID " + elements[i].id )
document.getElementById(elements[i].id).remove();
}*/
});
$('input[type="file"]').change(function(e)
{
var $selectedFilesContainer = $('<div class="selected-files-container"></div>');
var $selectedFiles = $('<div class="selected-files"></div>');
$selectedFilesContainer.append($selectedFiles);
var fileName = e.target.files[0].name;
var aaa = e.target.files.length;
//var numFiles = $("input", this)[0].files.length;
console.log(" ++++ " + aaa);
let nom = "";
let taille = "";
var array_files = new Array();
let i = 0;
for (i = 0; i < aaa; i++)
{
let fileName = e.target.files[i].name;
let fileSize = formatBytes(e.target.files[i].size, 2)
let aqw = "1234";
nom += e.target.files[i].name + "<br>";
taille += formatBytes(e.target.files[i].size, 2) + "<br>";
//taille += humanFileSize(e.target.files[i].size) + "<br>";
//taille += e.target.files[i].size + "<br>";
var $fileItem = $('<div class="file-item">' + fileName +'</div>');
var $removeButton = $('<span class="remove-button">x</span>');
$removeButton.on('click', function()
{
alert("Action ...");
console.log("klhklhjkhjhkj");
});
$fileItem.append($removeButton);
$selectedFiles.append($fileItem);
console.log("contenu " + $selectedFiles.childNodes);
//$selectedFiles.append($fileItem);
array_files.push('<div class="file-item">' + fileName +'</div><span class="remove-button" onclick="go(i)" >x</span>');
//div.innerHTML += fileName + '<button id="btn" onclick="go('aqw')" name="btn">Button</button>' + "<br>";
/*
for (var i = 0; i < 5; i++) {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("Button " + i);
btn.appendChild(t);
document.getElementById("button-container").appendChild(btn);
}
*/
/*
for (var i = 0; i < 5; i++) {
var btn = $("<button>").text("Button " + i);
btn.addClass("my-button");
btn.attr("data-index", i);
$("#button-container").append(btn);
}
*/
//var newID= "indice"+i+1 ;
//div.innerHTML += '<button id=newID name="btn" onclick="go(this.id)" >Button</button>';
/*
<span class="remove-button">x</span>
*/
}
for (i = 0; i < aaa; i++)
{
let fileName = e.target.files[i].name;
const div = document.createElement('div');
div.id = "list_files" + i;
const text = document.createElement('span');
text.id = "name_file" + i;
text.innerText = fileName;
// Crée un nouveau bouton
const button = document.createElement('button');
// Définit l'ID du bouton
button.id = 'button' + i;
// Définit le texte du bouton
button.innerText = 'X' + i;
button.addEventListener('click', function()
{
//handleClick(button.id); // Appelle la fonction en passant l'ID
supprimeClick(div.id, button.id);
});
// Ajoute le bouton au conteneur
div.appendChild(text);
div.appendChild(button);
div.style.marginBottom = '10px';
container.appendChild(div);
}
//$("p").append(" <b>Appended text</b>.");
console.log(" --->>>> " + nom + " " + taille);
console.log(" --->>>> " + $selectedFiles);
/*
<tr${highlight}>
<td>${currGrade}</td>
<td>${currAge}</td>
</tr>
*/
// https://www.codedrome.com/creating-html-tables-with-javascript/
// https://www.valentinog.com/blog/html-table/
//alert('The file "' + fileName + '" has been selected.');
//$selectedFilesContainer.addClass('has-files');
//document.getElementById("message").innerHTML = "whatever";
/////// OK mais on ne l'utilise pas
////// Function(array_files);
//document.getElementById("message").innerHTML = "changement...";
//$('#message').html('whatever');
});
});
/*
window.onload = function() {
const fileCollection = document.getElementsByClassName('file1');
for(let fileInput of fileCollection) {
fileInput.addEventListener('change', getFileName);
}
}
*/
/*
const getFileName = (event) => {
const files = event.target.files;
const fileName = files[0].name;
console.log("file name: ", fileName);
}
*/
function supprimeClick(divId, buttonId)
{
console.log(" Supprime >>> " + buttonId);
document.getElementById(divId).remove();
// list_files3
var ret = divId.replace('list_files','');
console.log(" Indice " + ret);
const fileList = document.getElementById('fileInput').files;
//fileList.delete(ret);
const newFileList = Array.prototype.slice.call(fileList, 1);
console.log(" ------ " + newFileList + " " + newFileList.length);
findElementID()
const fileInput = document.getElementById('fileInput');
const fileCount = fileInput.files.length;
console.log(`Number of selected files: ${fileCount}`);
}
function handleClick(buttonId)
{
// Affiche l'ID du bouton cliqué dans le paragraphe "output"
// output.textContent = "Bouton cliqué : " + buttonId;
console.log(" ----->>> " + buttonId);
// Supprime le bouton cliqué
// buttonId.remove();
document.getElementById(buttonId).remove();
}
function humanFileSize(size) {
var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
return +((size / Math.pow(1024, i)).toFixed(2)) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
}
function formatBytes(bytes,decimals) {
if(bytes == 0) return '0 Bytes';
var k = 1024,
dm = decimals || 2,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
function go(val)
{
console.log("TRACE... " + val);
console.log(val.length); // 3.
}
function titi(val)
{
alert(val);
console.log("efeze " + val);
}
function findElementID()
{
/*var elem = document.getElementById('container').children;
for (i = 0; i <= elem.length - 1; i++)
{
console.log("aaaaaaa");
}*/
var matches = [];
var searchEles = document.getElementById("buttonContainer").children;
console.log("DEBUT " + searchEles.length);
//searchEles.children[0];
for(var i = 0; i < searchEles.length; i++)
{
var premier = document.getElementById(searchEles[i].id).children;
console.log("aaaTRACE " + searchEles[i].id + " " + premier.length);
for(var j = 0; j < premier.length; j++)
{
console.log("Suite " + i + " " + premier[j].tagName );
var span_Text = premier[j].tagName;
if(span_Text == "SPAN")
{
var champ = document.getElementById(premier[j].id).innerText;
console.log("Bingo..." + champ + " " + premier[j].id );
matches.push(champ);
}
}
}
console.log(" Contenu : " + matches.length );
for (var i = 0; i < matches.length; i++)
{
console.log(" Contenu ---->>> : " + matches[i] );
}
console.log(" ---------------- : ");
//const fs = require('fs')
// Data which will write in a file.
//let data = "Hello world."
// Write data in 'Hello.txt' .
/*fs.writeFile('Hello.txt', data, (err) =>
{
// In case of a error throw err.
if (err) throw err;
})*/
//https://stackoverflow.com/questions/2013728/passing-javascript-array-to-php-through-jquery-ajax
/* OK
var vehicle = [];
vehicle.push("bidule.pdf");
vehicle.push("zoulou.docx");
vehicle.push("document.pptx");
$.ajax({
data: {
vehicle:vehicle
},
type: "post",
url: "save.php",
success: function(data){
alert(data);
}
});
*/
$.ajax({
data: {
matches:matches
},
type: "post",
url: "transfert.php",
success: function(data){
alert(data);
}
});
/*
var url = "traitement.php";
$.ajax({
type: "POST",
//url: url,
url: 'traitement.php', 'matches[]': matches,
//data: JSON.stringify(data),
//contentType: "application/json; charset=utf-8",
//dataType: "json",
error: function() {
alert("Error");
},
success: function() {
alert("OK");
}
});
*/
/*for(var j = 0; j < premier.length; i++)
{
console.log("aaaTRACE " + premier[j].id );
/*if(premier[j].tagName == "SPAN" )
{
var span_Text = document.getElementById(premier[j].id).innerText;
console.log("aaaTRACE " + premier[j].id + " " + span_Text);
}*/
/*}*/
//console.log("aaaTRACE " + searchEles[i].id + " " + premier.length );
/*
if(premier[i].tagName == "SPAN" )
{
var span_Text = document.getElementById(premier[i].id).innerText;
console.log("aaaTRACE " + premier[i].id + " " + premier.length + " " + premier[i].tagName + " " + span_Text);
}*/
/*for(var j = 0; j < premier.length; i++)
{
console.log("TRACE" + premier[j].id);
}*/
/*if(searchEles[i].tagName == "SPAN" )
{
//matches.push(searchEles[i]);
console.log("TRACE");
}*/
/*if(searchEles[i].tagName == "DIV" )
{
//matches.push(searchEles[i]);
console.log("aaaTRACE " + searchEles[i].id );
/*var pipo = document.getElementById(searchEles[i].id).children;
for(var i = 0; i < pipo.length; i++)
{
console.log("blabla");
}*/
/*}*/
/*console.log("FIN");
var elements = document.getElementById('buttonContainer').children;
// <p id="msg"></p> plus haut
//var msg = document.getElementById('msg');
// Loop through all the child elements inside the parent DIV.
for (i = 0; i <= elements.length - 1; i++)
{
//msg.innerHTML = msg.innerHTML + '<br />' + birds[i].id;
console.log(" IDssss " + elements[i].id + " ++++ " + elements[i].name );
}*/
}
function query()
{
const fileInput_elements = document.getElementById('fileInput');
let fileInput_length = fileInput_elements.files.length;
console.log(" Total " + fileInput_length);
// https://www.codexworld.com/upload-multiple-files-with-javascript-using-php/
// https://www.codeguage.com/courses/advanced-js/file-apis-file-object
const test_formData = new FormData();
if (fileInput_length > 0) {
for (var i = 0; i < fileInput_length; i++)
{
console.log("TRACE");
console.log( " ///// " + fileInput_elements.files[i].name);
console.log( " ///// " + fileInput_elements.files[i].size);
//console.log( " ///// " + fileInput_elements.files[i].type);
test_formData.append("files[]", fileInput_elements.files[i]);
}
}
//test_formData.delete("enCaIC0617700Vir.part03.rar");
for (const pair of test_formData.entries()) {
console.log(" Infos " +
pair[0],
pair[1].name + ", " + pair[1].size + ", " + pair[1].type + ", " + pair[1].lastModifiedDate
);
}
for (let keyValue of test_formData.entries())
{
console.log(keyValue);
console.log(" +++ " + keyValue[0]+ ', '+ keyValue[1]);
}
/*var elem = document.getElementById("file1");
var names = [];
for (var i = 0; i < elem.files.length; ++ i)
{
//names.push(elem.files[i].name);
console.log(" ++++ " + elem.files[i].name );
}*/
// https://stackoverflow.com/questions/3144419/how-do-i-remove-a-file-from-the-filelist
const objfileInput = document.querySelector("#fileInput");
for (const file of objfileInput.files)
{
//output.innerText += `\n${file.name}`;
console.log("Object list file " + file.name );
}
findElementID();
const fileInput = document.getElementById('fileInput');
const fileCount = fileInput.files.length;
console.log(`Number of selected files: ${fileCount}`);
var formData = new FormData(document.getElementById('form_transfert_fichier'));
for (var p of formData)
{
let name = p[0];
let value = p[1];
console.log(" ?????? " + name + " " + value);
}
/*const file_input_data = document.getElementById('form_transfert_fichier');
console.log(file_input_data.files[0]); // File object
console.log(file_input_data.files[1]); // File object
console.log(file_input_data.files[2]); // File object
*/
for (const [key, value] of formData) {
console.log('»', key, value)
}
/*
const input = document.getElementById('fileInput');
// as an array, u have more freedom to transform the file list using array functions.
const fileListArr = Array.from(input.files);
console.log("TRACE" + fileListArr );
fileListArr.splice(1); // here u remove the file
console.log(fileListArr);
*/
}
/*
$(document).ready(function() {
$("#file1").change(function() {
var file_name=$("#file1").val();
console.log(" ++++ " + file_name);
$("#list_files").append("<tr><td>"+file_name+"</td></tr>");
}); });
*/
</script>
<br>
<br>
<div id=message">dgfqdsgfqsdgdfg cretin</div>
</body>
<table id="list_files"> </table>
<script>
function Function(val)
{
//document.getElementById("demo").innerHTML = val;
//$("#demo").append('<div id = "newElement">A ' + 'Computer Science portal for geeks</div>');
$("#demo").append("Voici la liste des fichiers selectionnés :");
for (let i = 0; i < val.length; i++)
{
$("#demo").append(val[i]);
console.log(" ++++ " + val[i] );
}
//$('#demo').append('<div> This div is appended! </div>')
}
</script>
</html>
<!--
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>
<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
-->
<!--
const fileInputs = document.querySelectorAll(‘input[type=”file”]’);
let fileCount = 0;
for (let i = 0; i < fileInputs.length; i++) {
fileCount += fileInputs[i].files.length;
}
console.log(`Number of selected files: ${fileCount}`);
-->
<!--
const input = document.querySelector('input')
input.addEventListener('change', (e) => {
const files = input.files
const filesCount = fileList.length
for (let i = 0; i < files.length; i++) {
const file = files[i]
alert(file.name)
}
})
-->
<!--
var formData = new FormData();
var colors = ['red', 'blue', 'green'];
for (var i = 0; i < colors.length; i++) {
formData.append('color', colors[i]);
}
-->
<!--
var formData = new FormData();
formData.append("email", "test1@test.com");
formData.append("email", "test2@test.com");
formData.get("email");
and
formData.getAll("email")
-->
<!--
1
echo $_FILES['fichier']['name'] /* nom du fichier */
2
echo $_FILES['fichier']['type'] /* type du fichier */
3
echo $_FILES['fichier']['size'] /* taille en octets */
4
echo $_FILES['fichier']['tmp_name'] /* emplacement du fichier temporaire sur le serveur */
5
echo $_FILES['fichier']['error'] /* code erreur du téléchargement */
-->