[Java][PHP][HTML]Multiupload zdjęć + pasek postępu Opcje

[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

[PHP] pobierz, plaintext 
<?php
 
/* utworzenie zmiennych */
$plik=0;
$plik = count($_FILES['fileToUpload']['name']);
print_r($plik);
/* 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) {
exit("Nie wysłano żadnego pliku");
}
 
 
/* sprawdzenie błędów */
switch ($plik_blad) {
case UPLOAD_ERR_OK:
break;
case UPLOAD_ERR_NO_FILE:
exit("Brak pliku.");
break;
case UPLOAD_ERR_INI_SIZE:
case UPLOAD_ERR_FORM_SIZE:
exit("Przekroczony maksymalny rozmiar pliku.");
break;
default:
exit("Nieznany błąd.");
break;
}
 
/* sprawdzenie rozszerzenia pliku - dzięki temu mamy pewność, że ktoś nie zapisze na serwerze pliku .php */
$dozwolone_rozszerzenia=array("jpeg", "jpg", "tiff", "tif", "png", "gif");
$plik_rozszerzenie=pathinfo(strtolower($plik_nazwa), PATHINFO_EXTENSION);
if (!in_array($plik_rozszerzenie, $dozwolone_rozszerzenia, true)) {
	exit("Niedozwolone rozszerzenie pliku.");
}
 
 
/* przeniesienie pliku z folderu tymczasowego do właściwej lokalizacji */
$plik_nowa_nazwa=date("YmdHisu")."-".rand(1000, 9999);
if (!move_uploaded_file($plik_lokalizacja, $folder_upload."/".$plik_nowa_nazwa.".".$plik_rozszerzenie)) {
exit("Nie udało się przenieść pliku.");
}
 
/* nie było błędów */
echo "Wysyłanie zdjęcia zostało zakończone:)"; 
$link = $folder_upload."/".$plik_nowa_nazwa.".".$plik_rozszerzenie; 
 
setcookie ("link",$link,'0');
   }
 ?>
 
[PHP] pobierz, plaintext 

javascript i formularze to gotowy skrypt znaleziony w internecie

[HTML] pobierz, plaintext 
 
 
 <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">
      <label for="fileToUpload">Select a File to Upload</label><br />
      <input type="file" multiple="multiple" name="fileToUpload[]" id="fileToUpload" onchange="fileSelected();"/>
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" onclick="uploadFile()" value="Upload" />
    </div>
    <div id="progressNumber"></div>
  </form>
[HTML] pobierz, plaintext 

[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

Ten post edytował Wampirek12 13.02.2016, 14:01:48

[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

[PHP] pobierz, plaintext 
 function fileSelected() { 
		var fileInput = document.getElementById("fileToUpload");
var files = fileInput.files;
var file;
for (var i = 0; i < files.length; i++) {
            var file = document.getElementById('fileToUpload').files[i];
            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('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>';
 
            }
        }}
 
        function uploadFile() {
				var fileInput = document.getElementById("fileToUpload");
var files = fileInput.files;
var file;
 
for (var i = 0; i < files.length; i++) {
			var file = document.getElementById('fileToUpload').files;
            var fd = new FormData();
            fd.append("fileToUpload", document.getElementById('fileToUpload').files[i]);
            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 konwersjaBajtow(bajty) {
    var kilobajt=1024;
    var megabajt=kilobajt*1024;
    var gigabajt=megabajt*1024;
    var terabajt=gigabajt*1024;
 
    if (bajty>=0 && bajty<kilobajt) return bajty+" B";
    else if(bajty>=kilobajt && bajty<megabajt) return Math.round(bajty/kilobajt)+" kB";
    else if(bajty>=megabajt && bajty<gigabajt) return Math.round(bajty/megabajt)+" MB";
    else if(bajty>=gigabajt && bajty<terabajt) return Math.round(bajty/gigabajt)+" GB";
    else if(bajty>=terabajt) return Math.round(bajty/terabajt)+" TB";
    else return bajty+" B";
		}
        function uploadProgress(event){
            if (event.lengthComputable) {
				   var procent=Math.round((event.loaded/event.total)*100);
    document.getElementById("status").innerHTML="Wysłano"+konwersjaBajtow(event.loaded)+" z "+konwersjaBajtow(event.total)+" ("+procent+"%)";
				document.getElementById('postep').value=procent;
 
				} else {
                document.getElementById('status').innerHTML = 'unable to compute';
            }}
 
 
        function uploadComplete(evt) {
            /* This event is raised when the server send back a response */
            document.getElementById("status").innerHTML+=evt.target.responseText;
        }
 
        function uploadFailed(evt) {
            document.getElementById("status").innerHTML+="There was an error attempting to upload the file.";
        }
 
        function uploadCanceled(evt) {
           document.getElementById("status").innerHTML+="The upload has been canceled by the user or the browser dropped the connection.";
        }
[PHP] pobierz, plaintext 

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

Ten post edytował Wampirek12 17.02.2016, 11:29:49