buona sera...problema con javascript..ah ah
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> </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;
}
?>
