Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JS][PHP] Pasek postępu do upladu plików, XMLHttpRequest upload file
yarek12
post 10.12.2011, 12:08:10
Post #1





Grupa: Zarejestrowani
Postów: 127
Pomógł: 0
Dołączył: 5.08.2010

Ostrzeżenie: (10%)
X----

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]
Go to the top of the page
+Quote Post

Posty w temacie
- yarek12   [JS][PHP] Pasek postępu do upladu plików   10.12.2011, 12:08:10
- - Kshyhoo   A jakie jest pytanie? Co nie działa?   10.12.2011, 13:33:14
- - yarek12   O boże zapomniałem najważniejszego.... Chodzi o ...   10.12.2011, 14:36:58
- - Kshyhoo   Jak to nie odpala? Masz uprawnienia wogóle do uplo...   10.12.2011, 16:14:24
- - yarek12   Nie, nie było testowane na innych serwerach, testo...   10.12.2011, 16:34:34
- - Kshyhoo   Ja myślę, że ni po stronie skryptu (skoro działa n...   10.12.2011, 16:54:52
- - yarek12   Wiec jakie ustawienia serwera mogą odpowiadać za t...   10.12.2011, 21:51:32
- - zkr1965   Spróbuj może tak: xhr.open("POST", ...   21.12.2011, 21:54:00

« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 08:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn