Bonjour à tous, voilà depuis plusieurs jours je tente d’afficher les informations contenues dans le fichier upload.php, mais je n’arrive pas à récupérer le contenu du fichier pour l’afficher dans le script. Merci d’avance pour votre aide bonne journée à tous.
const form = document.querySelector("form"),
fileInput = document.querySelector(".file-input"),
progressArea = document.querySelector(".progress-area"),
uploadedArea = document.querySelector(".uploaded-area");
form.addEventListener("click", () =>{
fileInput.click();
});
fileInput.onchange = ({target})=>{
let file = target.files[0];
if(file){
let fileName = file.name;
if(fileName.length >= 350){
let splitName = fileName.split('.');
fileName = splitName[0].substring(0, 351) + "... ." + splitName[1];
}
uploadFile(fileName);
}
}
function uploadFile(name){
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/upload.php");
xhr.upload.addEventListener("progress", ({loaded, total}) =>{
let fileLoaded = Math.floor((loaded / total) * 100);
let fileTotal = Math.floor(total / 1000);
let fileSize;
(fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024*1024)).toFixed(2) + " MB";
let progressHTML = `<li class="row">
<i class="fas fa-file-alt"></i>
<div class="content">
<div class="details">
<span class="name">${name} • Uploading</span>
<span class="percent">${fileLoaded}%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: ${fileLoaded}%"></div>
</div>
</div>
</li>`;
uploadedArea.classList.add("onprogress");
progressArea.innerHTML = progressHTML;
if(loaded == total){
progressArea.innerHTML = "";
let uploadedHTML = `<li class="row">
<div class="content upload">
<i class="fas fa-file-alt"></i>
<div class="details">
<span class="name">${name} • Uploaded</span>
<span class="size">${fileSize}</span>
</div>
</div>
<i class="fas fa-check"></i>
<button onclick="document.getElementById('id${name}').style.display='block'" class="w3-button">Details</button>
<div id="id${name}" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id${name}').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>${name}
<br>${fileSize}
</p>
<p> ICI LE RESULTAT DE UPLOAD.PHP</p>
</div>
</div>
</div> </li>`;
uploadedArea.classList.remove("onprogress");
uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML);
}
});
let data = new FormData(form);
xhr.send(data);
}