I would like to add a progress bar to my script. My little program that I have purified of many things is structured in only two files:
index.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
<?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');
}
?>
I read the discussion and it seems at first glance what is needed for my case but the code in part is not understandable and above all does not work. To be precise, I have these questions:
1.Because in server_side.php a variable is created that sums up all the integers that precede a GET variable. What is the functionality of $sum?
2.Why my code does not work?
Thank you
index.php
<!doctype html>
<html>
<head>
<script>
function myTimer()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("percentageDiv").innerHTML=xmlhttp.response;
alert(xmlhttp.response);
}
}
xmlhttp.open("GET","getter.php",true);
xmlhttp.send();
}
function loop(){
var loop_index = document.getElementById("loop_nr").value;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("sumDiv").innerHTML="Total sum = " + xmlhttp.response;
clearInterval(myVar);
}
}
xmlhttp.open("GET","server_side.php?nr="+loop_index,true);
xmlhttp.send();
var myVar=setInterval(function(){myTimer()},1000);
}
var timer;
//try to delete duplications. Do a generic function that does the request to php
function makeRequest(toPHP, callback) {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
callback(xmlhttp.response);
}
}
xmlhttp.open("GET",toPHP,true);
xmlhttp.send();
}
function loop() {
var loop_index = document.getElementById("loop_nr").value;
makeRequest("server_side.php?nr="+loop_index, function(response) {
document.getElementById("sumDiv").innerHTML="Total sum = " + response;
clearInterval(timer);
});
timer=setInterval(makeRequest("getter.php", function(response) {
document.getElementById("percentageDiv").innerHTML=response;
}),1000);
}
</script>
<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>
<div id="percentageDiv"> Percentage div</div>
<div id="sumDiv"></div>
<form enctype="multipart/form-data" method="GET">
<input type="text" id="loop_nr">
<input type="submit" onclick="loop()">
</form>
</body>
</html>
server_side.php
<?php session_start(); // Avvio una sessione per creare la variabile 'progress'.
// Questa funzione scrive la somma di tutti gli interi precedenti ad $nr
// si salva anche in $_SESSION['progress'] il valore 'nr'
function sum($nr) {
$progress = 0 ;
$sum = 0 ;
for ($i = 1; $i <= $nr; $i++) {
$sum = $sum + $i;
$progress++;
$_SESSION['progress'] = $progress;
}
echo $sum;
}
// Se esiste la variabile 'nr' salvo in $result l'output sum($_GET['nr'])
if(isset($_GET['nr'])) {
// La variabile 'nr' sta arrivando quindi eseguo sum() e salvo tutto in $result
$result = sum($_GET['nr']);
}
getter.php
<?php
session_start(); // Si avvia una sessione per scrivere $_SESSION['progress']
$progress = $_SESSION['progress'];
echo $progress; // Si visualizza $_SESSION['progress']
?>
upload_file.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');
}
?>
This script below seems to me much more modern because it uses jQuery. It should be more compatible with different browsers. I have tested the files on my server but it does not work. Where am I wrong?
index.php
<!doctype html>
<html lang="it">
<head>
<script src="jquery-3.3.1.min.js"></script>
<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>
<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" id="button">
<progress id="progress" value="0"></progress>
<span id="display"></span>
</form>
</body>
</html>
upload_file.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');
}
?>
