Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS][PHP] Pasek postępu do upladu plików
Forum PHP.pl > Forum > Po stronie przeglądarki
yarek12
10.12.2011, 12:08:10
Witam, korzystając z tego poradnika: http://www.matlus.com/html5-file-upload-with-progress/ napisałem pasek postępu, powiem tak, działa rewelacyjnie! Aż... Do momentu wrzucenia na serwer, podejrzewam że jest to wina linki odpowiadającej za otwieranie upload.php.

Oto mój kod:

test.php
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Upload Files using XMLHttpRequest - Minimal</title>
  5.  
  6.     <script type="text/javascript">
  7.       function fileSelected() {
  8.         var file = document.getElementById('fileToUpload').files[0];
  9.         if (file) {
  10.           var fileSize = 0;
  11.           if (file.size > 1024 * 1024)
  12.             fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
  13.           else
  14.             fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
  15.  
  16.           document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
  17.           document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
  18.           document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
  19.         }
  20.       }
  21.  
  22.       function uploadFile() {
  23.         var fd = new FormData();
  24.         fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
  25.         var xhr = new XMLHttpRequest();
  26.         xhr.upload.addEventListener("progress", uploadProgress, false);
  27.         xhr.addEventListener("load", uploadComplete, false);
  28.         xhr.addEventListener("error", uploadFailed, false);
  29.         xhr.addEventListener("abort", uploadCanceled, false);
  30.         xhr.open("POST", "Upload.php");
  31.         xhr.send(fd);
  32.       }
  33.  
  34.       function uploadProgress(evt) {
  35.         if (evt.lengthComputable) {
  36.           var percentComplete = Math.round(evt.loaded * 100 / evt.total);
  37.           document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
  38.           document.getElementById("prg").style.width = percentComplete.toString() + '%';  
  39.         }
  40.         else {
  41.           document.getElementById('progressNumber').innerHTML = 'unable to compute';
  42.         }
  43.       }
  44.  
  45.       function uploadComplete(evt) {
  46.         /* This event is raised when the server send back a response */
  47.         alert("Success upload");
  48.       }
  49.  
  50.       function uploadFailed(evt) {
  51.         alert("There was an error attempting to upload the file.");
  52.       }
  53.  
  54.       function uploadCanceled(evt) {
  55.         alert("The upload has been canceled by the user or the browser dropped the connection.");
  56.       }
  57.  
  58.     </script>
  59. </head>
  60. <body>
  61.   <form id="form1" method="post" enctype="multipart/form-data" action="?">
  62.     <div class="row">
  63.       <label for="fileToUpload">Select a File to Upload</label><br />
  64.       <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
  65.     </div>
  66.     <div id="fileName"></div>
  67.     <div id="fileSize"></div>
  68.     <div id="fileType"></div>
  69.     <div class="row">
  70.       <input type="button" onclick="uploadFile()" name="upload" value="Upload" />
  71.     </div>
  72.     <div id="progressNumber"></div> 
  73.     <div id="frame" style="width: 400px; border: 1px solid #000; height: 10px;"><div id="prg" style="background: red; height: 10px; width: 0%;"></div></div>
  74.   </form>
  75. </body>
  76. </html>
[HTML] pobierz, plaintext


Upload.php:
[PHP] pobierz, plaintext 
  1. <?php
  2.   $file_tmp = $_FILES['fileToUpload']['tmp_name'];
  3.   $file_name = $_FILES['fileToUpload']['name'];
  4.   $file_size = $_FILES['fileToUpload']['size'];
  5.   $file_mime = $_FILES['fileToUpload']['type']; 
  6.   if (is_uploaded_file($file_tmp)) {
  7.   move_uploaded_file($file_tmp, 'files/'.$file_name);
  8.   echo 1;
  9.   }
  10.   else {
  11.   echo 0;
  12.   }
  13. ?>
  14.  
  15.  
  16. Orientujących się w temacie bardzo proszę o pomoc.
  17. Pozdrawiam
[PHP] pobierz, plaintext

[php][/php]
Kshyhoo
10.12.2011, 13:33:14
A jakie jest pytanie? Co nie działa?
yarek12
10.12.2011, 14:36:58
O boże sad.gif zapomniałem najważniejszego....

Chodzi o to, że na serwerze nie idpala pliku upload.php, więc tym samym plik nie zostaną wrzucone.
Kshyhoo
10.12.2011, 16:14:24
Jak to nie odpala? Masz uprawnienia wogóle do uploadu? Skrypt sprawdzony na innym serwerze? Jakieś komunikaty o błędach? Raportowanie włączone? Mamy myśleć za Ciebie?
yarek12
10.12.2011, 16:34:34
Nie, nie było testowane na innych serwerach, testowane tylko na localhost - działa.

Pytam co ewentualnie może właśnie być wyłączone na serwerze, nie jestem zaawansowany w programowaniu java, dlatego to pytanie, a co do upladu to tak, uprawnienia są. Wina na pewno leży po stronie skryptu, ponieważ upload.php samo w sobie działa dobrze, tylko 30 linijka kodu: xhr.open("POST", "Upload.php"); - nie odpala go na serwerze.
Kshyhoo
10.12.2011, 16:54:52
Ja myślę, że ni po stronie skryptu (skoro działa na localu), tylko po stronie serwera.
yarek12
10.12.2011, 21:51:32
Wiec jakie ustawienia serwera mogą odpowiadać za tą linijkę kodu? (tzn funkcje użyte w niej - 30 linijka)
zkr1965
21.12.2011, 21:54:00
Spróbuj może tak:
xhr.open("POST", "./upload.php");
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.