Fonction innerHTML
Résolu
k-64
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
k-64 Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
k-64 Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
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);
}
A voir également:
- Fonction innerHTML
- Fonction si et - Guide
- Fonction miroir - Guide
- Fonction moyenne excel - Guide
- Fonction remplacer sur word - Guide
- Fonction somme excel - Guide
5 réponses
Bonjour,
Vu que tu fais de l'ajax (du xmlhttprequest...) il serait bien de voir ce que te retourne la console de ton navigateur.
Je te conseille, pour débuguer de l'ajax, d'utiliser FireFox ( et de bien penser à activer le debug XHR )
Vu que tu fais de l'ajax (du xmlhttprequest...) il serait bien de voir ce que te retourne la console de ton navigateur.
Je te conseille, pour débuguer de l'ajax, d'utiliser FireFox ( et de bien penser à activer le debug XHR )
Merci pour ta réponse rapide, en effet le résultat et bien là... mais comment je l'affiche sur ma page une fois valider ?
Tout semble bon "État 200 OK" ...
Juste je n'arrive pas à l'afficher sur la page
comment les récupérer pour les afficher comme résultat si tout et ok vers la ligne 80
Déjà, si c'est pour écrire dans ta balise <p>
il faut lui mettre un ID
Puis, pour l'ajax, Il faut utiliser le onreadystatechange et vérifier qu'il est égale à 4
il faut lui mettre un ID
<p id="resultat"> ICI LE RESULTAT DE UPLOAD.PHP</p>
Puis, pour l'ajax, Il faut utiliser le onreadystatechange et vérifier qu'il est égale à 4
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
console.log(xhr.response);
// ici .. tu écris le code pour l'afficher dans ta page
document.getElementById('resultat').innerHTML = xhr.response;
}
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
