Aggiungere una barra di avanzamento al mio script

**giannino1995** · 04-04-2018, 19:55

Vorrei aggiungere al mio script una barra di avanzamento, ho provato diversi script ma alcuni non funzionano ed altri non riesco a capire come installarli.
Il mio programmino che ho depurato di molte cose è strutturato in 2 soli file:
index.php

Codice PHP:


<!doctype html>
<html>
<head><title>Titolo</title></head>
<body>
<form enctype="multipart/form-data" action="upload_file.php" method="POST">
  <input type="hidden" name="MAX_FILE_SIZE" value="4294967296">
  Invia questo file: <input name="userfile" type="file">
  <input type="submit" value="Upload file">
</form>
</body>
</html>

upload_file.php

Codice PHP:


 <?php
$userfile_tmp = $_FILES['userfile']['tmp_name'];
$userfile_name = $_FILES['userfile']['name'];
if (move_uploaded_file($userfile_tmp, $uploaddir . $userfile_name)) {
header('Location: index.php');
}else{
header('Location: index.php');
}
?>

Il programma carica file sul server ma non informa l'utente sul tempo rimanente.

**giannino1995** · 12-04-2018, 19:56

Se aggiungo il codice seguente ad index.php non accade nulla.

codice HTML:

<!doctype html>
<html lang="it">
<head>
<script src="jquery-3.3.1.min.js"></script>
<title>Titolo</title>
</head>
<body>
<script>
var progressBar = document.getElementById("progress"),
loadBtn = document.getElementById("button"),
display = document.getElementById("display");
function upload(data) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload_file.php", true);
if (xhr.upload) {
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
        progressBar.max = e.total;
        progressBar.value = e.loaded;
        display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
        }
    }
    xhr.upload.onloadstart = function(e) {
        progressBar.value = 0;
        display.innerText = '0%';
        }
    xhr.upload.onloadend = function(e) {
        progressBar.value = e.loaded;
        loadBtn.disabled = false;
        loadBtn.innerHTML = 'Upload file';
        }
}
xhr.send(data);
}
function buildFormData() {
    var fd = new FormData();
    for (var i = 0; i < 3000; i += 1) {
        fd.append('data[]', Math.floor(Math.random() * 999999));
        }
return fd;
}
loadBtn.addEventListener("click", function(e) {
    this.disabled = true;
    this.innerHTML = "Uploading...";
    upload(buildFormData());
});
</script>
<form enctype="multipart/form-data" action="upload_file.php" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="4294967296">
    Invia questo file: <input name="userfile" type="file">
    <input type="submit" value="Upload file" id="button">
    <progress id="progress" value="0"></progress>
    <span id="display"></span>
</form>
</body>
</html>

Dov'è l'errore?

Discussione: Aggiungere una barra di avanzamento al mio script

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Aggiungere una barra di avanzamento al mio script

Permessi di invio