My problem is, that the progressbar is always visible. I want to see it only, when the upload is in progress, or its complete.
Please comment, if you want to see the php file, that uploads the file to the server.
The upload is working, the problem is only with the progressbar.
My html form:
<form method="post" id="form" enctype="multipart/form-data" action="files/import_vevo_xls.php"> <table class="form"> <tr> <td> <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/> </td> <td> <div id="fileName"></div> <div id="fileSize"></div> <div id="fileType"></div> </td> </tr> </table> <table class="form"> <tr> <td class="last_td_no_border"> <button class="btn saveButton" name="submitButton" type="button" onclick="uploadFile()" id="importButton">Vevők importálása</button> </td> <div id="progress" style="display: block;width: 200px;padding: 1px 5px;margin: 1px 0;border: 1px inset #446;border-radius: 4px;"> <div id="progressNumber" style="height:5px;background: lime;"></div> <div id="progressValue" style="text-align: center;"></div> </div> </tr> </table> </form> And the javascript code:
var mbMaxFilesize = 5242880; // 5 MB function fileSelected() { /* A fajl kiválasztása után, megnézzük a nevét, kiszámítjuk a méretét és kiírjuk a típusát */ var file = document.getElementById('fileToUpload').files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Név: ' + file.name; document.getElementById('fileSize').innerHTML = 'Méret: ' + fileSize; document.getElementById('fileType').innerHTML = 'Típus: ' + file.type; } /* Megvizsgáljuk, hogy nem haladja-e meg a limitünket, az aktuálisan kiválasztott fájl mérete */ if (file.size > mbMaxFilesize) { alert("A fájl mérete maximum 5 MB lehet."); xhr.addEventListener("abort", uploadCanceled, false); return false; } } function uploadFile() { /* Maga az XMLHttpRequest indítása. A fajl kivalasztasa esetén itt indítjuk meg a küldést, illetve az eventeket/figyelésüket majd meghívjuk az upload.php szerver oldali fájlunkat */ var fd = new FormData(); fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open("POST", "files/import_vevo_xls.php"); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progressNumber').style.width = percentComplete + '%'; /*grafikus kijelzésnek*/ document.getElementById('progressValue').innerHTML = percentComplete.toString() + '%'; /*érték kijelzésének*/ } else { document.getElementById('progressNumber').innerHTML = 'nem kiszámithato.'; } } function uploadComplete(evt) { document.getElementById('progressNumber').style.width = 100 + '%'; /*grafikus kijelzésnek*/ document.getElementById('progressValue').innerHTML = '100' + '%'; /*érték kijelzésének*/ alert(evt.target.responseText); } function uploadFailed(evt) { alert("Hiba, a feltöltés sikertelen."); } function uploadCanceled(evt) { alert("A feltöltést a böngészö megszakitotta."); } 