ZendForm.php 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  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 an advanced use case of Zend_ProgressBar with
  23. * Zend_Form and Zend_File_Transfer.
  24. */
  25. set_include_path(realpath(dirname(__FILE__) . '/../../../library')
  26. . PATH_SEPARATOR . get_include_path());
  27. if (isset($_GET['progress_key'])) {
  28. require_once 'Zend/File/Transfer/Adapter/Http.php';
  29. require_once 'Zend/ProgressBar.php';
  30. require_once 'Zend/ProgressBar/Adapter/JsPull.php';
  31. $adapter = new Zend_ProgressBar_Adapter_JsPull();
  32. Zend_File_Transfer_Adapter_Http::getProgress(array('progress' => $adapter));
  33. die;
  34. }
  35. ?>
  36. <html>
  37. <head>
  38. <title>Zend_ProgressBar Upload Demo</title>
  39. <style type="text/css">
  40. iframe {
  41. position: absolute;
  42. left: -100px;
  43. top: -100px;
  44. width: 10px;
  45. height: 10px;
  46. overflow: hidden;
  47. }
  48. #progressbar {
  49. position: absolute;
  50. left: 10px;
  51. top: 120px;
  52. }
  53. .pg-progressbar {
  54. position: relative;
  55. width: 250px;
  56. height: 24px;
  57. overflow: hidden;
  58. border: 1px solid #c6c6c6;
  59. }
  60. .pg-progress {
  61. z-index: 150;
  62. position: absolute;
  63. left: 0;
  64. top: 0;
  65. width: 0;
  66. height: 24px;
  67. overflow: hidden;
  68. }
  69. .pg-progressstyle {
  70. height: 22px;
  71. border: 1px solid #748a9e;
  72. background-image: url('animation.gif');
  73. }
  74. .pg-text,
  75. .pg-invertedtext {
  76. position: absolute;
  77. left: 0;
  78. top: 4px;
  79. width: 250px;
  80. text-align: center;
  81. font-family: sans-serif;
  82. font-size: 12px;
  83. }
  84. .pg-invertedtext {
  85. color: #ffffff;
  86. }
  87. .pg-text {
  88. z-index: 100;
  89. color: #000000;
  90. }
  91. </style>
  92. <script type="text/javascript">
  93. function makeRequest(url)
  94. {
  95. var httpRequest;
  96. if (window.XMLHttpRequest) {
  97. httpRequest = new XMLHttpRequest();
  98. if (httpRequest.overrideMimeType) {
  99. httpRequest.overrideMimeType('text/xml');
  100. }
  101. } else if (window.ActiveXObject) {
  102. try {
  103. httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  104. } catch (e) {
  105. try {
  106. httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  107. } catch (e) {}
  108. }
  109. }
  110. if (!httpRequest) {
  111. alert('Giving up :( Cannot create an XMLHTTP instance');
  112. return false;
  113. }
  114. httpRequest.onreadystatechange = function() { evalProgress(httpRequest); };
  115. httpRequest.open('GET', url, true);
  116. httpRequest.send('');
  117. }
  118. function observeProgress()
  119. {
  120. setTimeout("getProgress()", 1500);
  121. }
  122. function getProgress()
  123. {
  124. makeRequest('ZendForm.php?progress_key=' + document.getElementById('progress_key').value);
  125. }
  126. function evalProgress(httpRequest)
  127. {
  128. try {
  129. if (httpRequest.readyState == 4) {
  130. if (httpRequest.status == 200) {
  131. eval('var data = ' + httpRequest.responseText);
  132. if (data.finished) {
  133. finish();
  134. } else {
  135. update(data);
  136. setTimeout("getProgress()", 1000);
  137. }
  138. } else {
  139. alert('There was a problem with the request.');
  140. }
  141. }
  142. } catch(e) {
  143. alert('Caught Exception: ' + e.description);
  144. }
  145. }
  146. function update(data)
  147. {
  148. document.getElementById('pg-percent').style.width = data.percent + '%';
  149. document.getElementById('pg-text-1').innerHTML = data.text;
  150. document.getElementById('pg-text-2').innerHTML = data.text;
  151. }
  152. function finish()
  153. {
  154. document.getElementById('pg-percent').style.width = '100%';
  155. document.getElementById('pg-text-1').innerHTML = 'Upload done';
  156. document.getElementById('pg-text-2').innerHTML = 'Upload done';
  157. }
  158. </script>
  159. </head>
  160. <body>
  161. <?php
  162. require_once 'Zend/View.php';
  163. require_once 'Zend/Form.php';
  164. $form = new Zend_Form(array(
  165. 'enctype' => 'multipart/form-data',
  166. 'action' => 'ZendForm.php',
  167. 'target' => 'uploadTarget',
  168. 'onsubmit' => 'observeProgress();',
  169. 'elements' => array(
  170. 'file' => array('file', array('label' => 'File')),
  171. 'submit' => array('submit', array('label' => 'Upload!'))
  172. )
  173. ));
  174. $form->setView(new Zend_View());
  175. echo $form;
  176. ?>
  177. <iframe name="uploadTarget"></iframe>
  178. <div id="progressbar">
  179. <div class="pg-progressbar">
  180. <div class="pg-progress" id="pg-percent">
  181. <div class="pg-progressstyle"></div>
  182. <div class="pg-invertedtext" id="pg-text-1"></div>
  183. </div>
  184. <div class="pg-text" id="pg-text-2"></div>
  185. </div>
  186. </div>
  187. <div id="progressBar"><div id="progressDone"></div></div>
  188. </body>
  189. </html>