File "000ex02.php"
Full Path: /home/analogde/www/30_09_2024/000ex02.php
File size: 16.01 KB
MIME-type: text/html
Charset: utf-8
<!--voir ???https://www.codexworld.com/upload-multiple-files-with-javascript-using-php/ formData.append("files[]", fileInput.files[i]);-->
<div id="file_count"></div> <!-- <input type="file" id="fileUpload" multiple /> -->
<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>
<!-- <button onclick="query()">Upload</button> -->
<input type="button" value="Envoi" onclick="debug_evolution();" /> </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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
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 formData = new FormData();
formData = traitement();
console.log("#########################################");
var numb = Array.from(formData.keys()).length;
let indice = 0;
for (const pair of formData.entries()) { console.log('${pair[0]}, ${pair[1]}'); }
var retour = formData.getAll('files')
console.log(" xxxx " + retour);
for (let keyValue of formData.entries()) { var lulu = formData[indice]; console.log("Contenu " + lulu); console.log("Indice " + indice); ++indice; }
console.log("---> " + numb);
//for (var i = 0; i < numb; ++i) //for (let item of formData) //{ //var data_envoi = new FormData(); //data_envoi.append('file', item);/* 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(formData); */
/*for (let item of formData) { console.log(item) }*/
/*for (let keyValue of formData.entries()) { console.log(keyValue); var data_envoi = new FormData(); data_envoi.append('file', keyValue); 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_envoi); }
for (var newfile of formData.getAll('file')) { console.log(newfile.name); console.log(newfile.size); //MIME type } */}
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_evolution.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 debug_evolution(){ 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 files = fileInput.files; var inp = document.getElementById('uploadFile'); var formData = new FormData(); for (var i = 0; i < inp.files.length; ++i) { var name = inp.files.item(i).name; console.log("here is a file name: " + name); for (var j = 0; j < array_valide_file.length; ++j) { if( name == array_valide_file[j]) { console.log(" Bingo envoi " + name ) // maintenant on va remplir le nouveau Formdata formData.append("files[]", inp.files[i]); //formData.append('file', inp.files[i]); } } } // pour le debug, je veux voir le contenu de formdata - on going ..../* 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); //MIME type } */ //var arraycontains = (tableau.indexOf("volvo.txt") > -1); /*if( name == "volvo.txt" ) { console.log(">>>> " + indice + " " + name + " " + file ); formData.append('file', file); }*/ console.log("TRACE...."); xhr_send(formData);}
function debug(){ 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 files = fileInput.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);
for (var j = 0; j < array_valide_file.length; ++j) { if( name == array_valide_file[j]) { console.log(" Bingo envoi " + name ) // maintenant on va remplir le nouveau Formdata var formData = new FormData(); formData.append('file', inp.files[i]); xhr_send(formData); } } }
// pour le debug, je veux voir le contenu de formdata - on going ..../* 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); //MIME type } */ //var arraycontains = (tableau.indexOf("volvo.txt") > -1); /*if( name == "volvo.txt" ) { console.log(">>>> " + indice + " " + name + " " + file ); formData.append('file', file); }*/
//console.log("TRACE...."); return(formData);}
function traitement(){ //https://www.encodedna.com/javascript/practice-ground/default.htm?pg=javascript_indexof_method //var inp = document.getElementById('upload_prev'); //console.log(" ----- " + inp.length);
// vide le tableau 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 );
//for (var j = 0; j < pipo.length; j++) //{ // on prend uniquement le premier qui correspond class="filenameupload" // console.log( pipo[0].innerHTML + " " + pipo[0].className ); array_valide_file.push( pipo[0].innerHTML ); // différence entre append et push //} //console.log( theDiv[i].innerHTML ); // result.innerHTML } }
for (i = 0; i < array_valide_file.length; i++) { console.log("Contenu " + i + " " + array_valide_file[i] ); } // maintenant on va remplir le nouveau Formdata var formData = new FormData(); var fileInput = document.getElementById('uploadFile'); //var files = fileInput.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);
for (var j = 0; j < array_valide_file.length; ++j) { if( name == array_valide_file[j]) { console.log(" Bingo " + name ) formData.append('file', inp.files[i]); // essai à faire
//formData.append("files[]", fileInput.files[i]); // google >>>> javascript post form data with multiple of files to php // https://stackoverflow.com/questions/12989442/uploading-multiple-files-using-formdata // https://www.tutorialswebsite.com/upload-multiple-files-using-javascript-and-php/ //https://www.codexworld.com/upload-multiple-files-with-form-data-using-jquery-ajax-php/ //https://hackernoon.com/how-to-create-a-multiple-files-uploader-for-your-php-application // https://www.tutorialspoint.com/how-to-select-and-upload-multiple-files-with-html-and-php-using-http-post // https://digitalfox-tutorials.com/tutorial.php?title=Preview-validate-and-upload-multiple-files-with-javascript-AJAX-and-PHP //https://blog.filestack.com/upload-multiple-files-using-javascript/ // https://www.studentstutorial.com/ajax/multiple-file-upload#google_vignette // https://www.webslesson.info/2021/07/javascript-multiple-file-upload-progress-bar-with-php.html } } }
// pour le debug, je veux voir le contenu de formdata - on going ..../* 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); //MIME type } */ //var arraycontains = (tableau.indexOf("volvo.txt") > -1); /*if( name == "volvo.txt" ) { console.log(">>>> " + indice + " " + name + " " + file ); formData.append('file', file); }*/ //console.log("TRACE...."); return(formData);}
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>