Upload.php 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <?php
  2. /**
  3. * Zend Framework
  4. *
  5. * LICENSE
  6. *
  7. * This source file is subject to the new BSD license that is bundled
  8. * with this package in the file LICENSE.txt.
  9. * It is also available through the world-wide-web at this URL:
  10. * http://framework.zend.com/license/new-bsd
  11. * If you did not receive a copy of the license and are unable to
  12. * obtain it through the world-wide-web, please send an email
  13. * to license@zend.com so we can send you a copy immediately.
  14. *
  15. * @category Zend
  16. * @package Zend_ProgressBar
  17. * @subpackage Demos
  18. * @copyright Copyright (c) 2005-2015 Zend Technologies USA Inc. (http://www.zend.com)
  19. * @license http://framework.zend.com/license/new-bsd New BSD License
  20. */
  21. /**
  22. * This sample file demonstrates a simple use case of a jspull-driven progressbar
  23. */
  24. if (isset($_GET['uploadId'])) {
  25. set_include_path(realpath(dirname(__FILE__) . '/../../../library')
  26. . PATH_SEPARATOR . get_include_path());
  27. require_once 'Zend/ProgressBar.php';
  28. require_once 'Zend/ProgressBar/Adapter/JsPull.php';
  29. require_once 'Zend/Session/Namespace.php';
  30. $data = uploadprogress_get_info($_GET['uploadId']);
  31. $bytesTotal = ($data === null ? 0 : $data['bytes_total']);
  32. $bytesUploaded = ($data === null ? 0 : $data['bytes_uploaded']);
  33. $adapter = new Zend_ProgressBar_Adapter_JsPull();
  34. $progressBar = new Zend_ProgressBar($adapter, 0, $bytesTotal, 'uploadProgress');
  35. if ($bytesTotal === $bytesUploaded) {
  36. $progressBar->finish();
  37. } else {
  38. $progressBar->update($bytesUploaded);
  39. }
  40. }
  41. ?>
  42. <html>
  43. <head>
  44. <title>Zend_ProgressBar Upload Demo</title>
  45. <style type="text/css">
  46. iframe {
  47. position: absolute;
  48. left: -100px;
  49. top: -100px;
  50. width: 10px;
  51. height: 10px;
  52. overflow: hidden;
  53. }
  54. #progressbar {
  55. position: absolute;
  56. left: 10px;
  57. top: 50px;
  58. }
  59. .pg-progressbar {
  60. position: relative;
  61. width: 250px;
  62. height: 24px;
  63. overflow: hidden;
  64. border: 1px solid #c6c6c6;
  65. }
  66. .pg-progress {
  67. z-index: 150;
  68. position: absolute;
  69. left: 0;
  70. top: 0;
  71. width: 0;
  72. height: 24px;
  73. overflow: hidden;
  74. }
  75. .pg-progressstyle {
  76. height: 22px;
  77. border: 1px solid #748a9e;
  78. background-image: url('animation.gif');
  79. }
  80. .pg-text,
  81. .pg-invertedtext {
  82. position: absolute;
  83. left: 0;
  84. top: 4px;
  85. width: 250px;
  86. text-align: center;
  87. font-family: sans-serif;
  88. font-size: 12px;
  89. }
  90. .pg-invertedtext {
  91. color: #ffffff;
  92. }
  93. .pg-text {
  94. z-index: 100;
  95. color: #000000;
  96. }
  97. </style>
  98. <script type="text/javascript">
  99. function makeRequest(url)
  100. {
  101. var httpRequest;
  102. if (window.XMLHttpRequest) {
  103. httpRequest = new XMLHttpRequest();
  104. if (httpRequest.overrideMimeType) {
  105. httpRequest.overrideMimeType('text/xml');
  106. }
  107. } else if (window.ActiveXObject) {
  108. try {
  109. httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  110. } catch (e) {
  111. try {
  112. httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  113. } catch (e) {}
  114. }
  115. }
  116. if (!httpRequest) {
  117. alert('Giving up :( Cannot create an XMLHTTP instance');
  118. return false;
  119. }
  120. httpRequest.onreadystatechange = function() { evalProgress(httpRequest); };
  121. httpRequest.open('GET', url, true);
  122. httpRequest.send('');
  123. }
  124. function observeProgress()
  125. {
  126. setTimeout("getProgress()", 1500);
  127. }
  128. function getProgress()
  129. {
  130. makeRequest('Upload.php?uploadId=' + document.getElementById('uploadId').value);
  131. }
  132. function evalProgress(httpRequest)
  133. {
  134. try {
  135. if (httpRequest.readyState == 4) {
  136. if (httpRequest.status == 200) {
  137. eval('var data = ' + httpRequest.responseText);
  138. if (data.finished) {
  139. finish();
  140. } else {
  141. update(data);
  142. setTimeout("getProgress()", 1000);
  143. }
  144. } else {
  145. alert('There was a problem with the request.');
  146. }
  147. }
  148. } catch(e) {
  149. alert('Caught Exception: ' + e.description);
  150. }
  151. }
  152. function update(data)
  153. {
  154. document.getElementById('pg-percent').style.width = data.percent + '%';
  155. document.getElementById('pg-text-1').innerHTML = data.timeRemaining + ' seconds remaining';
  156. document.getElementById('pg-text-2').innerHTML = data.timeRemaining + ' seconds remaining';
  157. }
  158. function finish()
  159. {
  160. document.getElementById('pg-percent').style.width = '100%';
  161. document.getElementById('pg-text-1').innerHTML = 'Upload done';
  162. document.getElementById('pg-text-2').innerHTML = 'Upload done';
  163. }
  164. </script>
  165. </head>
  166. <body>
  167. <form enctype="multipart/form-data" method="post" action="Upload.php" target="uploadTarget" onsubmit="observeProgress();">
  168. <input type="hidden" name="UPLOAD_IDENTIFIER" id="uploadId" value="<?php echo md5(uniqid(rand())); ?>" />
  169. <input type="file" name="file" />
  170. <input type="submit" value="Upload!" />
  171. </form>
  172. <iframe name="uploadTarget"></iframe>
  173. <div id="progressbar">
  174. <div class="pg-progressbar">
  175. <div class="pg-progress" id="pg-percent">
  176. <div class="pg-progressstyle"></div>
  177. <div class="pg-invertedtext" id="pg-text-1"></div>
  178. </div>
  179. <div class="pg-text" id="pg-text-2"></div>
  180. </div>
  181. </div>
  182. <div id="progressBar"><div id="progressDone"></div></div>
  183. </body>
  184. </html>