Fonction innerHTML
Résolu
k-64
Messages postés
4
Statut
Membre
-
k-64 Messages postés 4 Statut Membre -
k-64 Messages postés 4 Statut Membre -
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);
}
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 )
-
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<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 à 4xhr.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 -
Merci ces génial sa marche super !!! en vous souhaitant une belle journée...
