File "toto.html"
Full Path: /home/analogde/www/FormData/toto.html
File size: 11.69 KB
MIME-type: text/html
Charset: utf-8
<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"/>
<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">
<button onclick="Function()">Click me</button>
<div id="buttonContainer"></div>
<button onclick="query()"> Query </button>
<p id="demo">zoulou</p>
<form id="form_transfert_fichier" name="form_transfert_fichier" enctype="multipart/form-data">
<table width="100%">
<tr>
<td style="width:100px;">Selection :</td>
<td>zzzzzaaaa<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 />
<!--
<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
$(document).ready(function()
{
$('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();
for (let 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>');
$selectedFiles.append($fileItem);
array_files.push('<div class="file-item">' + fileName +'</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";
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 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 titi(val)
{
alert(val);
console.log("efeze " + val);
}
/*
$(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]);
}
//$('#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>
-->