Abbiamo parlato di progress bar in articoli precedenti e nello specifico abbiamo trattato la creazione di una semplice progress bar e la progress bar per monitorare l’inserimento dei dati in un data base MySQL.
Indice
Prerequisiti per le prove di codice
Prima di iniziare, diamo spesso per scontato che chi si imbatte in queste pagine sia gia al corrente degli strumenti minimi per poter effettuare delle prove di codice. A tale proposito ricordiamo che per provare queste semplici righe di codice sono necessari i seguenti strumenti software:
- Browser che utilizzate per navigare (Firefox, Chrome, Opera, Safati, … fate voi)
- Editor per la scrittura del codice (ad esempio Sublime Text)
- Web Server installato in locale (ad esempio XAMPP) o servizio web con file da salvare con l’FTP
Creazione della progress bar per l’upload file la pagina principale index.php
Passiamo subito al codice e alla pagina principale index.php. Si osservi che è importante includere le librerie jquery-2.1.1.min.js e jquery.form.min.js:
<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 {border:#0FA015 1px solid;padding: 5px 0px;margin:30px 0px;border-radius:4px;text-align:center;}
#targetLayer{width:100%;text-align:center;}
</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($('#userImage').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>
<form id="uploadForm" action="upload.php" method="post">
<div>
<label>Upload File immagine:</label>
<input name="userImage" id="userImage" 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>
La pagina upload.php
Questa pagina ha una struttura molto semplice:
iuyiuyiuy
<?php
if(!empty($_FILES)) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = "images/".$_FILES['userImage']['name'];
echo $targetPath."<br>";
if(move_uploaded_file($sourcePath,$targetPath)) {
?>
<img src="<?php echo $targetPath; ?>" width="100px" height="100px" />
<?php
}
}
}
?>
La vostra applicazione completa per l’upload file con progress bar
Eccoci giunti alla fine, ricapitolando dovrete creare:
- \images (cartella dove troverete i file inviati)
- index.php
- upload.php
- loader1.gif
Quindi vi occore solo recuperare dal web una gif animata che simula il loader ed è fatta! Potreste anche copiare il file gif animata nell’esemprio pratico di prova che troverete più sotto. Vorremmo ricordare che gestire l’upload dei file è una manovra delicata da fare soprattutto su un web server. Il nostro suggerimento è quello di cancellare i file dopo averli elaborati. A tale proposito vi ricordiamo il codice PHP per eliminare un file da una cartella:
$file = "images/".$_FILES['userImage']['name'];
if (unlink($file)) {
echo 'il file è stato cancellato';
}else{
echo 'il file NON è stato cancellato';
}
Se ne volete sapere di più sulla gestione dei file con PHP vi suggeriamo di leggere i nostri articoli sulla gestione dei file di testo con PHP.
Prova la nostra applicazione
Considerazioni finali
Abbiamo visto in questo articolo uno script su come creare una progress bar per il file upload con PHP e JQuery. Ricordiamo che questo Portale ha tutta una sezione riservata al linguaggio di programmazione PHP. In questa sezione oltre a tanti esempi di codice, troverete anche strumenti utili per la programmazione come Framework, librerie e tanto altro. Vi invitiamo quindi a visitare questa sezione del sito e ricordiamo che è disponibile anche una sezione esempi di codice PHP come quello che abbiamo proposto in questo articolo.