Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Java][PHP][HTML]Multiupload zdjęć + pasek postępu
Forum PHP.pl > Forum > Przedszkole
Wampirek12
Witam wiem, że z uploadem zdjęć jest duzo tematów jednak żaden nie rozwiązuje mojego problemu.
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
  1. <?php
  2.  
  3. /* utworzenie zmiennych */
  4. $plik=0;
  5. $plik = count($_FILES['fileToUpload']['name']);
  6. print_r($plik);
  7. /* utworzenie zmiennych */
  8. for ($i = 0; $i<$plik; $i++){
  9. $folder_upload="upload";
  10. $plik_nazwa=$_FILES['fileToUpload']['name'][$i];
  11. $plik_lokalizacja=$_FILES['fileToUpload']['tmp_name'][$i]; //tymczasowa lokalizacja pliku
  12. $plik_mime=$_FILES['fileToUpload']['type'][$i]; //typ MIME pliku wysłany przez przeglądarkę
  13. $plik_rozmiar=$_FILES['fileToUpload']['size'][$i];
  14. $plik_blad=$_FILES['fileToUpload']['error'][$i]; //kod błędu
  15.  
  16. /* sprawdzenie, czy plik został wysłany */
  17. if (!$plik_lokalizacja) {
  18. exit("Nie wysłano żadnego pliku");
  19. }
  20.  
  21.  
  22. /* sprawdzenie błędów */
  23. switch ($plik_blad) {
  24. case UPLOAD_ERR_OK:
  25. break;
  26. case UPLOAD_ERR_NO_FILE:
  27. exit("Brak pliku.");
  28. break;
  29. case UPLOAD_ERR_INI_SIZE:
  30. case UPLOAD_ERR_FORM_SIZE:
  31. exit("Przekroczony maksymalny rozmiar pliku.");
  32. break;
  33. default:
  34. exit("Nieznany błąd.");
  35. break;
  36. }
  37.  
  38. /* sprawdzenie rozszerzenia pliku - dzięki temu mamy pewność, że ktoś nie zapisze na serwerze pliku .php */
  39. $dozwolone_rozszerzenia=array("jpeg", "jpg", "tiff", "tif", "png", "gif");
  40. $plik_rozszerzenie=pathinfo(strtolower($plik_nazwa), PATHINFO_EXTENSION);
  41. if (!in_array($plik_rozszerzenie, $dozwolone_rozszerzenia, true)) {
  42. exit("Niedozwolone rozszerzenie pliku.");
  43. }
  44.  
  45.  
  46. /* przeniesienie pliku z folderu tymczasowego do właściwej lokalizacji */
  47. $plik_nowa_nazwa=date("YmdHisu")."-".rand(1000, 9999);
  48. if (!move_uploaded_file($plik_lokalizacja, $folder_upload."/".$plik_nowa_nazwa.".".$plik_rozszerzenie)) {
  49. exit("Nie udało się przenieść pliku.");
  50. }
  51.  
  52. /* nie było błędów */
  53. echo "Wysyłanie zdjęcia zostało zakończone:)";
  54. $link = $folder_upload."/".$plik_nowa_nazwa.".".$plik_rozszerzenie;
  55.  
  56. setcookie ("link",$link,'0');
  57. }
  58. ?>
  59.  

javascript i formularze to gotowy skrypt znaleziony w internecie
  1.  
  2.  
  3. <script type="text/javascript">
  4.  
  5. function fileSelected() {
  6. var file = document.getElementById('fileToUpload[]').files[0];
  7. if (file) {
  8. var fileSize = 0;
  9. if (file.size > 1024 * 1024)
  10. fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
  11. else
  12. fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
  13.  
  14. document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
  15. document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
  16. document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
  17. }
  18. }
  19.  
  20. function uploadFile() {
  21. var fd = new FormData();
  22. fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
  23. var xhr = new XMLHttpRequest();
  24. xhr.upload.addEventListener("progress", uploadProgress, false);
  25. xhr.addEventListener("load", uploadComplete, false);
  26. xhr.addEventListener("error", uploadFailed, false);
  27. xhr.addEventListener("abort", uploadCanceled, false);
  28. xhr.open("POST", "upload.php");
  29. xhr.send(fd);
  30. }
  31.  
  32. function uploadProgress(evt) {
  33. if (evt.lengthComputable) {
  34. var percentComplete = Math.round(evt.loaded * 100 / evt.total);
  35. document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
  36. }
  37. else {
  38. document.getElementById('progressNumber').innerHTML = 'unable to compute';
  39. }
  40. }
  41.  
  42. function uploadComplete(evt) {
  43. /* This event is raised when the server send back a response */
  44. alert(evt.target.responseText);
  45. }
  46.  
  47. function uploadFailed(evt) {
  48. alert("There was an error attempting to upload the file.");
  49. }
  50.  
  51. function uploadCanceled(evt) {
  52. alert("The upload has been canceled by the user or the browser dropped the connection.");
  53. }
  54.  
  55.  
  56. </script>
  57. </head>
  58. <form id="form1" enctype="multipart/form-data" method="post" action="upload.php">
  59. <div class="row">
  60. <label for="fileToUpload">Select a File to Upload</label><br />
  61. <input type="file" multiple="multiple" name="fileToUpload[]" id="fileToUpload" onchange="fileSelected();"/>
  62. </div>
  63. <div id="fileName"></div>
  64. <div id="fileSize"></div>
  65. <div id="fileType"></div>
  66. <div class="row">
  67. <input type="button" onclick="uploadFile()" value="Upload" />
  68. </div>
  69. <div id="progressNumber"></div>
  70. </form>
goartur
No i w czym masz problem ?
Wampirek12
Wyskakuje mi blad niedozwolone rozszezenie pliku mimo iz wszystko jest dobrze. Wydaje mi się ze w javascript trzeba wstawić pętlę ale nie wiem jak i gdzie. Jak nie ma javascriptu czyli bezpośrednio samo php to wszystko się wykonuje Tutaj kod odpalony ne serwerze
http://wampirek.hekko24.pl/katalog/katalog2.php
koodo218
Konsola nie wyskakuje z żadnym błędem, chociażby w linijce 6?

var file = document.getElementById('fileToUpload[]').files[0];
Wampirek12
var file = document.getElementById('fileToUpload[]').files[0];
usunąłem te [] i nie ma ŻADNEGO błędu a nadal jest komunikat niedozwolone rozszeżenie pliku


udało zrobic mi się ze upload działa poprawnie jednak mam problem z paskiem postępu mianowicie chciałbym aby dla kazdego pliku był oddzielny pasek postępu ale cos mi nie wychodzi jak zrobie to albo na jednym pasku są wyswietlane na zmiane inforamcje o roznych plikach albo wcale nie działa
  1. function fileSelected() {
  2. var fileInput = document.getElementById("fileToUpload");
  3. var files = fileInput.files;
  4. var file;
  5. for (var i = 0; i < files.length; i++) {
  6. var file = document.getElementById('fileToUpload').files[i];
  7. if (file) {
  8. var fileSize = 0;
  9. if (file.size > 1024 * 1024)
  10. fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
  11. else
  12. fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
  13. document.getElementById('fileN').innerHTML += '<div id='+ file.name + '><output id="status'+ file.name + '"></output></br><progress value="0" max="100" id="postep'+ file.name + '"></progress></br></br></br></br> </br>Nazwa: ' + file.name + '</br>Rozmiar: ' + fileSize+'</br>Typ: ' + file.type+'</br>-----</br></div>';
  14.  
  15. }
  16. }}
  17.  
  18. function uploadFile() {
  19. var fileInput = document.getElementById("fileToUpload");
  20. var files = fileInput.files;
  21. var file;
  22.  
  23. for (var i = 0; i < files.length; i++) {
  24. var file = document.getElementById('fileToUpload').files;
  25. var fd = new FormData();
  26. fd.append("fileToUpload", document.getElementById('fileToUpload').files[i]);
  27. var xhr = new XMLHttpRequest();
  28. xhr.upload.addEventListener("progress", uploadProgress, false);
  29. xhr.addEventListener("load", uploadComplete, false);
  30. xhr.addEventListener("error", uploadFailed, false);
  31. xhr.addEventListener("abort", uploadCanceled, false);
  32. xhr.open("POST", "upload.php");
  33. xhr.send(fd);
  34.  
  35. }
  36. }
  37. function konwersjaBajtow(bajty) {
  38. var kilobajt=1024;
  39. var megabajt=kilobajt*1024;
  40. var gigabajt=megabajt*1024;
  41. var terabajt=gigabajt*1024;
  42.  
  43. if (bajty>=0 && bajty<kilobajt) return bajty+" B";
  44. else if(bajty>=kilobajt && bajty<megabajt) return Math.round(bajty/kilobajt)+" kB";
  45. else if(bajty>=megabajt && bajty<gigabajt) return Math.round(bajty/megabajt)+" MB";
  46. else if(bajty>=gigabajt && bajty<terabajt) return Math.round(bajty/gigabajt)+" GB";
  47. else if(bajty>=terabajt) return Math.round(bajty/terabajt)+" TB";
  48. else return bajty+" B";
  49. }
  50. function uploadProgress(event){
  51. if (event.lengthComputable) {
  52. var procent=Math.round((event.loaded/event.total)*100);
  53. document.getElementById("status").innerHTML="Wysłano"+konwersjaBajtow(event.loaded)+" z "+konwersjaBajtow(event.total)+" ("+procent+"%)";
  54. document.getElementById('postep').value=procent;
  55.  
  56. } else {
  57. document.getElementById('status').innerHTML = 'unable to compute';
  58. }}
  59.  
  60.  
  61. function uploadComplete(evt) {
  62. /* This event is raised when the server send back a response */
  63. document.getElementById("status").innerHTML+=evt.target.responseText;
  64. }
  65.  
  66. function uploadFailed(evt) {
  67. document.getElementById("status").innerHTML+="There was an error attempting to upload the file.";
  68. }
  69.  
  70. function uploadCanceled(evt) {
  71. document.getElementById("status").innerHTML+="The upload has been canceled by the user or the browser dropped the connection.";
  72. }

gdyby ktoś podpowiedział jak do funkcji uploadprogress przesłać nazwę pliku? tak aby odświeżać div który właśnie jest nazwą pliku
http://wampirek.hekko24.pl/katalog/katalog2.php tutaj dziala strona
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.