buona sera...problema con javascript..ah ah

**noncecapisco** · 24-04-2024, 01.07.39

scusate ma ho problema strano...sicuramente sono io che sono incompetente..

ho trovato questo codice per una barra di caricamento upload ...in pratica funziona benissimo..la barra di

caricamento si accendo e segna la percentuale del caricamento, al 100% mi carica i record di mysql,e'

perfetto, solo che... indovinate che succede? al momento che la pagina mi stampa i record di mysql

mi viene un'altro form sotto a quello dove carico...identico.... scegli file, submit,e la barra di

caricamento, in ho 2 copie di form..allucinante.

Questa mattina ho capito il problema: quando si ricarica la pagina,per farmi stampare i record di mysql, mi ristampa

anche il form. secondo voi, esiste un modo per non farmi ristampare il form? grazie e buona giornata.

Codice HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="AlterVista - Editor HTML"/>
  <title></title>

</head>
<body>

  <p>&nbsp;</p>
<div>

Codice:

<style>
#uploadForm {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
#uploadForm label {margin:2px; font-size:1em; font-weight:bold;}
.demoInputBox{padding:5px; border:#F0F0F0 1px solid; border-radius:4px; background-color:#FFF;}
#progress-bar {background-color: #12CC1A;height:20px;color: #FFFFFF;width:0%;-webkit-transition: width .3s;-moz-transition: width .3s;transition: width .3s;}
.btnSubmit{background-color:#09f;border:0;padding:10px 40px;color:#FFF;border:#F0F0F0 1px solid; border-radius:4px;}
#progress-div {width:200px;border:#0FA015 1px solid;padding: 5px 0px;margin:30px 0px;border-radius:4px;}
<div>
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() { 
$('#uploadForm').submit(function(e) { 
if($('#file').val()) {
e.preventDefault();
$('#loader-icon').show();
$(this).ajaxSubmit({ 
target: '#targetLayer', 
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total, percentComplete){ 
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
},
success:function (){
$('#loader-icon').hide();
},
resetForm: true 
}); 
return false; 
}
});
}); 
</script>
</div>
<form id="uploadForm" action="/upload-italia.php" method="post">
<div>
<input name="file" id="file" type="file" class="demoInputBox" />
</div>
<div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div>
<div id="progress-div"><div id="progress-bar"></div></div>
<div id="targetLayer"></div>
</form>
<div id="loader-icon" style="display:none;"><img src="loader1.gif" /></div>

Codice PHP:



<?php

$servername = "localhost";
$username = "noncecapisco";
$password = "";
$dbname = "my_noncecapisco";


$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT  *FROM   Animali   ORDER BY id DESC "; 

$result = $conn->query($sql);
 $array_estensioni_poster= array('webm','mkv','ogg','3gp');
$array_estensioni_video= array('mp4');
$array_estensioni_immagini = array('jpg','jpeg','gif','tiff');

while ($row = $result->fetch_assoc()) {
$estensione = pathinfo($row["file"], PATHINFO_EXTENSION);

if(in_array($estensione, $array_estensioni_immagini))
{
echo' <div style ="margin-left:390px;width:450px;word-wrap:break-word;color:#666666;margin-top:-35px;margin-bottom:-5px;">'.$row["nome"].' </div><br>'.PHP_EOL; 
  echo "<img src ='".$row["file"]."'style='width:450px;height:auto;margin-left:390px;margin-top:-25px;'><br>".PHP_EOL; 

}
else if(in_array($estensione, $array_estensioni_video))
{
echo' <style ="margin-left:390px;width:450px;word-wrap:break-word;color:#666666;margin-top:5px;margin-bottom:-10px;">'.$row["nome"].' </div><br>'.PHP_EOL; 
 echo "<video preload='auto' src='".$row["file"]."'controls='true' position='fixed'style='width:450px;height:auto;margin-left:392px;margin-top:-25px;border-radius:5px;'></video><br>".PHP_EOL; 
}
else if(in_array($estensione, $array_estensioni_poster))
{
 echo' <div style ="margin-left:390px;width:450px;word-wrap:break-word;color:#666666;margin-top:5px;margin-bottom:-5px;">'.$row["nome"].' </div><br>'.PHP_EOL; 
 echo "<video poster='video-google-drive1.jpg'src='".$row["file"]."'controls='true' position='fixed'style='width:450px;height:auto;margin-left:390px;margin-top:-30px;border-radius:px;  border: 1px solid #CCCCCC;
'></video><br>".PHP_EOL; 

}
echo' <div style="margin-left:390px;width:450px;word-wrap:break-word;color:#666666;margin-top:5px;margin-bottom:140px;">'.$row["testo"].'</div><br>'.PHP_EOL; 
} 



?>

**alemoppo** · 24-04-2024, 13.45.52

Ricontrolla un attimo il codice, ad esempio vedo un "<div>" dentro <style> ... </style>. Lì dentro dovrebbe essere solo codice CSS, non HTML.

Se non dovessi riuscire, puoi mostrare qui l'URL di test?

Ciao!

**noncecapisco** · 24-04-2024, 14.03.44

ciao elmoppo....grazie sempre per gli aiuti....il div l'ho tolto ma continua con il problema. certo....prova..magari

riesci a trovare una soluzione...questo script e' una figata....

http://noncecapisco.altervista.org/a...ova%20sito.php

**GraphOGLRisorse** · 24-04-2024, 14.11.46

Salve,
lascerei stare di usare jquery per la barra di caricamento. Può essere implementato più semplicemnte con js base.

Esempio:

Codice:

<style>
.ProgressBar{width:200px;height:30px;border:#0FA015 1px solid;border-radius:4px;max-width:80%;display:block;margin:auto;position:relative;background:#555;padding:3px 1px;box-shadow:inset 0 -1px 1px rgba(255,255,255,0.3);}
#ColorBar{display:block;width:0px;height:100%;background-color:#12CC1A;position:relative;overflow:hidden;font-size:15px;text-align:center;color:white;transition:all 700ms ease;line-height:1.8;}
.btnSubmit{background-color:#09f;display:block;margin:auto;margin-top:20px;border:none;border-radius:4px;border:1px solid #ccc;box-shadow:1px 1px 10px rgba(0,0,0,0.2);padding:10px 40px;cursor:pointer;color:#FFF;}
.btnSubmit:active{background-color:#12CC1A;}
</style>

Imlementazione della barra con input submit.

Codice HTML:

<div style="position:absolute;margin:30px 0px;">
  <input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" onclick="AnimateBar()"><br>
  
  <div class="ProgressBar">
    <span style="width: 0%;" id="ColorBar">0%</span>
  </div>
</div>

Div in cui racchiudere ciò che deve appararire al termine del caricamento.

Codice HTML:

<div style="visibility:hidden;" id="LoadContent">

   <center>Contenuto caricato da visualizzare</center>
   
</div>

Js per gestire la barra di caricamnto.

Codice:

<script>
function AnimateBar() {
  var elem = document.getElementById("ColorBar");
  var stepValue = 0;
  var id = setInterval(frame, 500);

  function frame(){
    if(stepValue >= 100) {
      clearInterval(id);
      document.getElementById("LoadContent").style.visibility = "visible";	  
    }else {
      elem.style.width = stepValue + 10 + "%";
      elem.innerHTML = stepValue + 10 + "%";
      stepValue = stepValue + 10;
    }
    if(stepValue < 100){
       document.getElementById("LoadContent").style.visibility = "hidden";
    }
  }
}
</script>

Notare, che nell'esempio dimostrativo non ho inserito il form e l'input per il carimanto del file.

Aggiungo inoltre, che nel far caricare i file, andrebbe implementato anche un controllo per evitare che gli utenti possano caricare nel sito file di dimensioni elevate. Può essere fatto sia con js che con PHP

Con js:

Codice:

document.forms[0].addEventListener('submit', function( evt ) {
    var file = document.getElementById('file').files[0];

    if(file && file.size < 512000) { // 0.5 MB (valore in byte)
        //inserire qui il form        
    } else {
        evt.preventDefault();
		alert("il file non può superare i 500 KB");
    }
}, false);

con PHP:

Codice PHP:


if(isset($_FILES['file'])) {
    if($_FILES['file']['size'] < 512000) { // 0.5 MB (valore in byte)
        
    } else {
        echo "il file non può superare i 500 KB";
    }
}

Cordiali saluti.

**noncecapisco** · 24-04-2024, 14.25.30

grazie...non ho parole....mi sono commosso....ora provo tutto...grazie....

**noncecapisco** · 24-04-2024, 14.53.13

ho provato....nel database ho il file inserito,nella cartella anche, ma nel sito non mi stampa i record...

<style>
.ProgressBar{width:200px;height:30px;border:#0FA01 5 1px solid;border-radius:4px;max-width:80%;display:block;margin:auto;position:relat ive;background:#555;padding:3px 1px;box-shadow:inset 0 -1px 1px rgba(255,255,255,0.3);}
#ColorBar{display:block;width:0px;height:100%;back ground-color:#12CC1A;position:relative;overflow:hidden;fo nt-size:15px;text-align:center;color:white;transition:all 700ms ease;line-height:1.8;}
.btnSubmit{background-color:#09f;display:block;margin:auto;margin-top:20px;border:none;border-radius:4px;border:1px solid #ccc;box-shadow:1px 1px 10px rgba(0,0,0,0.2);padding:10px 40px;cursor:pointer;color:#FFF;}
.btnSubmit:active{background-color:#12CC1A;}
</style>
<div style="position:absolute;margin:30px 0px;">
<form action="/upload-italia3.php" method="post" enctype="multipart/form-data">
<input name="file" id="file"type="file"style="color:#666666;">
<input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" onclick="AnimateBar()"><br>

<div class="ProgressBar">
<span style="width: 0%;" id="ColorBar">0%</span>
</div>
</div>
<script>
function AnimateBar() {
var elem = document.getElementById("ColorBar");
var stepValue = 0;
var id = setInterval(frame, 500);

function frame(){
if(stepValue >= 100) {
clearInterval(id);
document.getElementById("LoadContent").style.visib ility = "visible";
}else {
elem.style.width = stepValue + 10 + "%";
elem.innerHTML = stepValue + 10 + "%";
stepValue = stepValue + 10;
}
if(stepValue < 100){
document.getElementById("LoadContent").style.visib ility = "hidden";
}
}
}
</script>

Codice PHP:



<div style="visibility:hidden;" id="LoadContent">
<center>

<?php


$servername = "localhost";
$username = "noncecapisco";
$password = "";
$dbname = "my_noncecapisco";


$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT  *FROM   Animali   ORDER BY id DESC "; 

$result = $conn->query($sql);
 $array_estensioni_poster= array('webm','mkv','ogg','3gp');
$array_estensioni_video= array('mp4');
$array_estensioni_immagini = array('jpg','jpeg','gif','tiff');

while ($row = $result->fetch_assoc()) {
$estensione = pathinfo($row["file"], PATHINFO_EXTENSION);

if(in_array($estensione, $array_estensioni_immagini))
{
echo' <div style ="margin-left:390px;width:450px;word-wrap:break-word;color:#666666;margin-top:-35px;margin-bottom:-5px;">'.$row["nome"].' </div><br>'.PHP_EOL; 
  echo "<img src ='".$row["file"]."'style='width:450px;height:auto;margin-left:390px;margin-top:-25px;'><br>".PHP_EOL; 

}
else if(in_array($estensione, $array_estensioni_video))
{
echo' <style ="margin-left:390px;width:450px;word-wrap:break-word;color:#666666;margin-top:5px;margin-bottom:-10px;">'.$row["nome"].' </div><br>'.PHP_EOL; 
 echo "<video preload='auto' src='".$row["file"]."'controls='true' position='fixed'style='width:450px;height:auto;margin-left:392px;margin-top:-25px;border-radius:5px;'></video><br>".PHP_EOL; 
}
else if(in_array($estensione, $array_estensioni_poster))
{
 echo' <div style ="margin-left:390px;width:450px;word-wrap:break-word;color:#666666;margin-top:5px;margin-bottom:-5px;">'.$row["nome"].' </div><br>'.PHP_EOL; 
 echo "<video poster='video-google-drive1.jpg'src='".$row["file"]."'controls='true' position='fixed'style='width:450px;height:auto;margin-left:390px;margin-top:-30px;border-radius:px;  border: 1px solid #CCCCCC;
'></video><br>".PHP_EOL; 

}
echo' <div style="margin-left:390px;width:450px;word-wrap:break-word;color:#666666;margin-top:5px;margin-bottom:140px;">'.$row["testo"].'</div><br>'.PHP_EOL; 
} 



?>
</center>
</div>

Codice PHP:



upload-italia3.php

<?php 


$file_salvato = rand(1, 100000000).'.'.pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION); 
$nomefile = ($file_salvato);



move_uploaded_file($_FILES["file"]["tmp_name"], "animali/".$file_salvato);


$dati = $_POST['testo'];
$file = $_POST['file'];
$email = $_POST['email'];
$nome = $_POST['nome'];

$db_host = 'localhost';
$db_user = 'noncecapisco';
$db_pass = '';
$db_name = 'my_noncecapisco';

$cn = new mysqli($db_host, $db_user, $db_pass, $db_name);

if ($cn->connect_errno) {
    echo "Connessione fallita: ". $cn->connect_error . ".";
    exit();
} 


$sql = "INSERT INTO  Animali  (testo,  file ,  nome , email ) VALUES ("


. "'" . $dati. "',"
  
 . "'" . $nomefile. "',"
         . "'" . $nome. "',"
      . "'" . $email. "');";


$last_insert_id = $conn->insert_id;


if (!$cn->query($sql)) {
 
 echo "Errore della query: " . $cn->error . ".";
}

     header("location:http://noncecapisco.altervista.org/animali/NuovoFile.php");
  


?>

**noncecapisco** · 24-04-2024, 15.52.05

siiiiiiiiiiiiiiiiiiiiiii... ho risolto....ho tolto la scritta "hidden"

<div style="visibility:hidden;" id="LoadContent">

e' perfettoooooooooooooooo,, grazie, grazie ,grazie....lei ed alemoppo siete delle persone meraviglioseeeeeee.

grazie di cuore!e scusi se non ho ancora capito come mettere i tag nel forum..ah ah.

**alemoppo** · 24-04-2024, 19.36.05

Originalmente inviato da noncecapisco

grazie di cuore!e scusi se non ho ancora capito come mettere i tag nel forum..ah ah.

Usa:

[PHP] codice [/PHP]] per il codice PHP.
[HTML] codice[/HTML] per il codice HTML.
[CODE] codice [/CODE] per codice generico (js, htaccess, css...).

Ciao!

**noncecapisco** · 24-04-2024, 20.34.03

ok boss...ah ah

**noncecapisco** · 24-04-2024, 21.05.40

e niente...ci ho provato in tutti i modi...ho fatto come ha scritto il signor "graph risorse", ma non funziona..va a scatti e ogni tanto si blocca..poi i file caricati si bloccano e scompare la barra scroll di crhome. me sa che gli da fastidio il codice perche' il sito originale funziona perfettamente.peccato,e' na figata la barra di caricamento.

**GraphOGLRisorse** · 24-04-2024, 22.15.11

Originalmente inviato da noncecapisco

e niente...ci ho provato in tutti i modi...ho fatto come ha scritto il signor "graph risorse", ma non funziona..va a scatti e ogni tanto si blocca..poi i file caricati si bloccano e scompare la barra scroll di crhome. me sa che gli da fastidio il codice perche' il sito originale funziona perfettamente.peccato,e' na figata la barra di caricamento.

Non ho capito quale sia la situazione e in quali condizioni avvengono i prblemi.

Può riportare un link demo per farci vedere il comportamento descritto?

Non si faccia problemi per riportare qui sul forim i link,se questi possano essere utili a capire le problematiche che riscontra. Senza poter verificare è difficile dare delle risposte.

Cordialis aluti.

**noncecapisco** · 24-04-2024, 23.17.03

buona sera signore, adesso sono riuscito a farlo funzionare meglio, sicuramente era dipeso da me.

pero' ce'un problema: in pratica quando si carica il file, la pagina, non lo mostra subito, lo mostra alla 2 volta

che si ricarica un file. ecco il link...grazie per il suo tempo..

Codice HTML:

http://noncecapisco.altervista.org/animali/NuovoFile.php

PS:ovviamente da pc..ta tablet e tel.il sito lo devo fare.grazie

**noncecapisco** · 25-04-2024, 10.18.23

buon giorno signore....con un po' di fortuna sono riuscito a trovare il problema..gli dava fastidio questo:

Codice HTML:

<div style="visibility:hidden;" id="LoadContent">

<center>
codice php

</center>
</div>

e' perfettooooooooooooooooo.....e' una figata grazie e buona giornata.

http://noncecapisco.altervista.org/a.../NuovoFile.php

**alemoppo** · 25-04-2024, 10.21.31

<center></center> non usarlo mai. Usa invece CSS.

Ciao!

**noncecapisco** · 25-04-2024, 10.28.14

buon giorno alemoppoooooooooooooooooooooo

**noncecapisco** · 25-04-2024, 14.28.21

scusi signor graph risorse..... volevo chiederle una cosa(sempre che sia fattibile).. ho visto che se si carica un

video , la barra di caricamento arriva al 100%, ma il video viene stampato una 20 di secondi dopo, ce'un modo per

regolare la percentuale della barra? grazie e buona giornata

**GraphOGLRisorse** · 25-04-2024, 18.03.10

Sì, dovrebbe essere fattbile. Effettivamente, così com'è, la barra non ha una vera utilità ma è più che altro un'arrccimento grafico fine a se stesso.

Provi modificando così il codice implementato in precedenza:

Codice:

<script>
function AnimateBar(t) {
  var elem = document.getElementById("ColorBar");
  var stepValue = 0;
  var id = setInterval(frame, 500*t);

  function frame(){
    if(stepValue >= 100) {
      clearInterval(id);
      document.getElementById("LoadContent").style.visibility = "visible";	  
    }else {
      elem.style.width = stepValue + 10 + "%";
      elem.innerHTML = stepValue + 10 + "%";
      stepValue = stepValue + 10;
    }
    if(stepValue < 100){
       document.getElementById("LoadContent").style.visibility = "hidden";
    }
  }
}

function loadTime(){
  var start = new Date().getTime();
  var image1 = new Image();
  var ResTime = function() {
    var now = new Date().getTime();
    var time = now - start;
    AnimateBar(time);
  };

  image1.onload = ResTime;
  image1.src = document.getElementById("btnSubmit").files[0];
}
</script>

Codice HTML:

<input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" onclick="loadTime();"><br>

In questo modo, la tempistica della barra dovrebbe variare in funzione del file che viene caricato.

Cordiali saluti.

**noncecapisco** · 25-04-2024, 18.43.29

buona sera,ho messo il nuovo codice, ed ho aggiunto l'html del submit, ma la striscia verde della percentuale non

parte..grazie e scusi il disturbo.

**GraphOGLRisorse** · 25-04-2024, 19.17.59

Nessun disturbo.

L'nput html per il submit non è da aggiungere ma da sosituire a quello già presente. Ovvero a questo:

Codice HTML:

<input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" onclick="AnimateBar()"><br>

Due o più elementi html non possono avere lo stesso id (id="btnSubmit"). Quindi è normale che non funzioni qualcosa correttamente.

Cordiali saluti.

**noncecapisco** · 25-04-2024, 19.40.34

mi scusi mi sono espresso male...volevo dire che avevo tolto quello vecchio e aggiunto il suo...comunque ho messo il suo nuovo codice html, che mi ha dato adesso (al posto di quello vecchio) ma la striscia verde corre piu' di prima...ah ah

**GraphOGLRisorse** · 25-04-2024, 19.55.17

la velocità dipende dal valore impostato qui:

Codice:

var id = setInterval(frame, 500*t);

500 è espresso in millisecondi ovvero, 0.5 sec. Deve modiifcare/ridurre il valore 500 in modo da adeguare la giusta velocità. 500*t vale a dire il tempo di caricamnto del file per 0.5 secondi. Evidentemente è eccessivo.

Provi con 50:

Codice:

var id = setInterval(frame, 50*t);

oppure semplicemente con solo t:

Codice:

var id = setInterval(frame, t);

Cordiali saluti.

**noncecapisco** · 25-04-2024, 20.23.52

perfettooooooooooo...che figataaa..ah ah ,so contento..grazie di cuore e buona serata.

Discussione: buona sera...problema con javascript..ah ah

LinkBack

Strumenti discussione

Display

buona sera...problema con javascript..ah ah

Regole di scrittura