Pagina form upload
codice:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento senza titolo</title>
<style type="text/css">
body{margin:0px; padding:0px;}
.inputfile{
height: 20px;
margin-bottom: 5px;
margin-right: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 500px;
display: inline-block;
background-color: #FF6600;
}
progress {
display: none;
}
</style>
</head>
<body>
<form action="tuapaginaupload.php" method="post" enctype="multipart/form-data" name="form-upload">
<input class="inputfile" name="images[]" type="file">
<input name="invia" type="button" onclick="uploadFile(this.form);" value="salva"> <progress min="0" max="100" value="0">0% complete</progress>
</form>
<script src="script.js"></script>
</body>
</html>
pagina script.js
codice:
var uploadFile = function(form){
var xhr = new XMLHttpRequest();
var formData = new FormData(form);
var progressBar = document.querySelector('progress');
progressBar.style.display='block';
xhr.upload.addEventListener("progress", function(e){
if(e.lengthComputable) {
$('input[name="invia"]').attr('disabled',true)
progressBar.value = ( e.loaded / e.total ) * 100;
progressBar.textContent = progressBar.value + '% complete';
}
}, false);
xhr.open(form.method, form.action, true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
progressBar.style.display='none';
progressBar.value = '';
}
}
xhr.send(formData);
return false;
}
Rispondi quotando
Originariamente inviata da xabax
