fileUpload/tpl/uploadForm.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Invia a Fabio Di Matteo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(e){
e.preventDefault();
var formData = new FormData($(this)[0]); //per i form "multipart/form-data"
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
timeout:60000,
async: true,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false, //per i form "multipart/form-data"
beforeSend: function () {
c='<div class="alert alert-warning" role="alert">Invio in corso...</div>'
$('#outputServer').html(c);
$('#mysubmit').attr("disabled", "disabled");
$('#fileprogress').show();
},
success: function (data) {
console.log('Richiesta inviata con successo.');
//c='<div class="alert alert-success" role="alert">File inviato correttamente.</div>';
$('#outputServer').html(data);
},
error: function(jqxhr, status, errorMessage){
console.log('Problemi invio dati: '+ errorMessage);
c='<div class="alert alert-danger" role="alert">Errore: '+errorMessage+'</div>';
$('#outputServer').html(c);
},
complete: function(){
$('#mysubmit').removeAttr("disabled");
},
xhr: function(){
var xhr = $.ajaxSettings.xhr() ;
xhr.upload.onprogress = function(evt){
$('#fileprogress').html(Math.round(evt.loaded/evt.total*100)+'%');
$('#fileprogress').attr('aria-valuenow', Math.round(evt.loaded/evt.total*100));
$('#fileprogress').css('width', Math.round(evt.loaded/evt.total*100)+'%');
} ;
xhr.upload.onload = function(){
$('#fileprogress').html('100% - caricamento completato.');
$('#fileprogress').attr('aria-valuenow', '100');
$('#fileprogress').css('width', '100%');
//c='<div class="alert alert-success" role="alert">Operazione conclusa con successo.</div>';
//$('#outputServer').html(c);
};
return xhr ;
}
});
return false;
}) ;
});
</script>
</head>
<body>
<div class="container" class="mt-3">
<div class="jumbotron" style="margin-top: 30px">
<h1>Invia un file a <strong>{{yourname}}</strong></h1>
<form id="myform" method='post' action='/upload' enctype='multipart/form-data' >
<div class="form-group">
<label for="exampleFormControlFile1">Scegli i file da inviare </label>
<input type="file" class="form-control-file btn btn-outline-success" id="myfile" name="myfile" multiple >
</div>
<div style="text-align: right"><input id="mysubmit" type="submit" class="btn btn-success" value="Invia file"></div>
</form>
<div style="margin-top: 10px;margin-bottom: 10px " id="outputServer"></div>
<div class="progress" style="margin-top: 25px; height: 25px">
<div id="fileprogress" class="progress-bar progress-bar-striped bg-success" style="Display: None ;width:0%;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div style="text-align:center">Oppure sfoglia i <a href="/share">file condivisi da {{yourname}}</a> </div>
</div>
</body>
</html>