Ho provato a risolvere il problema con il codice ajax ma la barra di caricamento non funziona
ecco la pagina
Codice PHP:
<?php
include_once("include/config.php");
// settiamo alcune variabili coinvolte nello script:
// 1) settiamo la cartella in cui fare l'upload
$cartella_upload ="img/";
// 2) settiamo un array in cui indichiamo il tipo di file che consentiamo l'upload
// in questo esempio solo immagini
$tipi_consentiti = array("gif","png","jpeg","jpg","mp3","mp4");
// 3) settiamo la dimensione massima del file (1048576 byte = 1Mb)
$max_byte = 1048576000 ;
// 4) settiamo il nome del file
$nome = $_FILES["upload"]["name"];
// se il form è stato inviato
if(isset($_POST['up']) and isset($_FILES["upload"]))
{
// verifichiamo che l'utente abbia selezionato un file
if(trim($_FILES["upload"]["name"]) == '')
{
echo '<img src="img/verifica/x.png" whidth="10px" height="20px">Non hai selezionato nessun file!';
}
// verifichiamo che il file è stato caricato
else if(!is_uploaded_file($_FILES["upload"]["tmp_name"]) or $_FILES["upload"]["error"]>0)
{
echo '<img src="img/verifica/x.png" whidth="10px" height="20px">Si sono verificati problemi nella procedura di upload!';
}
// verifichiamo che il tipo è fra quelli consentiti
else if(!in_array(strtolower(end(explode('.', $_FILES["upload"]["name"]))),$tipi_consentiti))
{
echo '<img src="img/verifica/x.png" whidth="10px" height="20px">Il file che si desidera uplodare non è fra i tipi consentiti!';
}
// verifichiamo che la dimensione del file non eccede quella massima
else if($_FILES["upload"]["size"] > $max_byte)
{
echo '<img src="img/verifica/x.png" whidth="10px" height="20px">Il file che si desidera uplodare eccede la dimensione massima!';
}
// verifichiamo che la cartella di destinazione settata esista
else if(!is_dir($cartella_upload))
{
echo '<img src="img/verifica/x.png" whidth="10px" height="20px">La cartella in cui si desidera salvare il file non esiste!';
}
// verifichiamo che la cartella di destinazione abbia i permessi di scrittura
else if(!is_writable($cartella_upload))
{
echo "<img src='img/verifica/x.png' whidth='10px' height='20px'>La cartella in cui fare l'upload non ha i permessi!";
}
// verifichiamo il successo della procedura di upload nella cartella settata
else if(!move_uploaded_file($_FILES["upload"]["tmp_name"], $cartella_upload.$_FILES["upload"]["name"]))
{
echo '<img src="img/verifica/x.png" whidth="10px" height="20px">Ops qualcosa è andato storto nella procedura di upload!';
}
// altrimenti significa che è andato tutto ok
else
{
echo '<img src="img/verifica/v.jpg" whidth="10px" height="20px">Upload eseguito correttamente!';
$sql = mysql_query("INSERT INTO file (nome_file, percorso_file)
VALUES ('$nome', '$cartella_upload')")
or die ("Query non valida");
echo "Query avvenuta correttamente";
mysql_close($conn);
}
}
?>
<head>
<title>Carica file</title>
<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.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>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="upload">
<input type="submit" name="up" value="Upload file">
<progress id="progress" value="0"></progress>
<span id="display"></span>
</form>
</body>
Rispondi quotando
