Zrobiłem stronę wszystko działa pięknie zdjęcia się dodają jednak jak wiadomo taki upload troszkę trwa dlatego chciałbym dodać pasek postępu aby było wiadomo czy zdjęcie w ogole się dodaje czy tez nie. I tu jest moj problem bo nie znam za bardzo JS i znalazłem gotowy skrypt który działa po jednym pliku ale gdy jest ich kilki juz nie.
plik upload.php
<?php /* utworzenie zmiennych */ $plik=0; /* utworzenie zmiennych */ for ($i = 0; $i<$plik; $i++){ $folder_upload="upload"; $plik_nazwa=$_FILES['fileToUpload']['name'][$i]; $plik_lokalizacja=$_FILES['fileToUpload']['tmp_name'][$i]; //tymczasowa lokalizacja pliku $plik_mime=$_FILES['fileToUpload']['type'][$i]; //typ MIME pliku wysłany przez przeglądarkę $plik_rozmiar=$_FILES['fileToUpload']['size'][$i]; $plik_blad=$_FILES['fileToUpload']['error'][$i]; //kod błędu /* sprawdzenie, czy plik został wysłany */ if (!$plik_lokalizacja) { } /* sprawdzenie błędów */ switch ($plik_blad) { case UPLOAD_ERR_OK: break; case UPLOAD_ERR_NO_FILE: break; case UPLOAD_ERR_INI_SIZE: case UPLOAD_ERR_FORM_SIZE: break; default: break; } /* sprawdzenie rozszerzenia pliku - dzięki temu mamy pewność, że ktoś nie zapisze na serwerze pliku .php */ } /* przeniesienie pliku z folderu tymczasowego do właściwej lokalizacji */ if (!move_uploaded_file($plik_lokalizacja, $folder_upload."/".$plik_nowa_nazwa.".".$plik_rozszerzenie)) { } /* nie było błędów */ $link = $folder_upload."/".$plik_nowa_nazwa.".".$plik_rozszerzenie; } ?>
javascript i formularze to gotowy skrypt znaleziony w internecie
<script type="text/javascript"> function fileSelected() { 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 = 'Name: ' + file.name; document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; document.getElementById('fileType').innerHTML = 'Type: ' + file.type; } } function uploadFile() { 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", "upload.php"); xhr.send(fd); } function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ alert(evt.target.responseText); } function uploadFailed(evt) { alert("There was an error attempting to upload the file."); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); } </script> </head> <body> <form id="form1" enctype="multipart/form-data" method="post" action="upload.php"> <div class="row"> <input type="file" multiple="multiple" name="fileToUpload[]" id="fileToUpload" onchange="fileSelected();"/> </div> <div class="row"> <input type="button" onclick="uploadFile()" value="Upload" /> </div> </form>