Как использовать кросс-браузерный пример LPology Simple Ajax Uploader на странице PHP / HTML

Я пытаюсь установить загрузчик, который имеет широкую кросс-браузерную совместимость (особенно для старых браузеров), но показывает, когда это возможно, индикатор выполнения и, возможно, слова «Загрузка …», если это невозможно.

LPology Simple Ajax Uploader Кажется, у меня есть нужные мне функции, и его легко установить, но я бьюсь головой о стену. Как вы можете сказать, я новичок в JavaScript.

Вот что я сделал …

1. Загрузил плагин на мой сервер
2. Успешно установлено расширение APC для PHP и включен rfc1867
3. Создана папка с документами для хранения загрузок с правильными разрешениями

4. Соберите файл UploadHandler.php, скопированный с https://www.lpology.com/code/ajaxuploader/phpdocs.php

   require_once("extras/Uploader.php");
   
   $uploader = new FileUpload('uploadFile');
   $uploader->uploadDir  = '/docs/';
   $uploader->allowedExtensions = array('txt', 'doc', 'docx', 'pdf', 'rtf');
   $uploader->sizeLimit = 10485760;
   
   $result = $uploader->handleUpload('/docs/');
   if (!$result) {
   echo json_encode(array(
   'success' => false,
   'msg' => $uploader->getErrorMsg()
   ));
   } else {
   echo json_encode(array(
   'success' => true,
   'file' => $uploader->getFileName()
   ));
   }
   

5. Попробовал следующий код на моей странице (сценарий почти дословно основан на примере кросс-браузера в LPology)

   <input id="upload-btn" type="bHoutton" value="Choose file">
   <span style="padding-left:5px;vertical-align:middle;">
   <i>TXT, DOC, DOCX, PDF, and RTF (5000K max file size)</i>
   </span>
   
   <script language="JavaScript" type="text/javascript" src="ajax/Simple-Ajax-Uploader-master/SimpleAjaxUploader.min.js"></script>
   
   <script>
   var progress = document.getElementById('progress'), // progress bar
   loaderImg = document.getElementById('loaderImg'); // "loading" animated GIF
   errBox = document.getElementById('errormsg');
   
   var uploader = new ss.SimpleUpload({
   button: 'upload-btn',
   url: '../ajax/Simple-Ajax-Uploader-master/extras/uploadHandler.php', // server side handler
   progressUrl: '../ajax/Simple-Ajax-Uploader-master/extras/uploadProgress.php', // enables cross-browser progress support (more info below)
   responseType: 'json',
   name: 'uploadfile',
   maxSize: 5000,
   hoverClass: 'ui-state-hover',
   focusClass: 'ui-state-focus',
   disabledClass: 'ui-state-disabled',
   onExtError: function(filename, extension) {
   alert(filename + ' is not a permitted file type.' + "\n\n" + 'Only TXT, DOC, DOCX, PDF, and RTF files are allowed.');
   },
   onSizeError: function(filename, fileSize) {
   alert(filename + ' is too big. (5000K max file size)');
   },
   
   startXHR: function(filename, size) {
   progress.style.display = 'inline-block'; // show progress bar
   this.setProgressBar(progress); // designate as progress bar
   // Dynamically add a "Cancel" button to be displayed when upload begins
   // By doing it here ensures that it will only be added in browses which
   // support cancelling uploads
   var abort = document.createElement('button');
   wrap.appendChild(abort);
   abort.className = 'btn btn-sm btn-info';
   abort.innerHTML = 'Cancel';
   // Adds click event listener that will cancel the upload
   // The second argument is whether the button should be removed after the upload
   // true = yes, remove abort button after upload
   // false/default = do not remove
   this.setAbortBtn(abort, true);
   },
   endXHR: function(filename) {
   button.innerHTML = 'Uploading...';
   progress.style.display = 'none'; // hide progress bar
   },
   startNonXHR: function(filename) {
   loaderImg.style.display = 'inline-block'; // show animated GIF
   },
   endNonXHR: function(filename) {
   button.innerHTML = 'Uploading...';
   loaderImg.style.display = 'none'; // hide animated GIF
   }
   });
   </script>
   

Когда я нажимаю кнопку «Выбрать файл», индикатор выполнения не отображается и ничего не загружается. Firebug говорит мне, что «прогресс» — ноль. Спасибо большое за вашу помощь!