Как использовать кросс-браузерный пример 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 говорит мне, что «прогресс» — ноль. Спасибо большое за вашу помощь!

1

Решение

Вам нужно иметь начальную загрузку, чтобы показать индикатор выполнения

<button id="mergedp" class="btn btn-large btn-primary"> upload </button>
<div id="progressOuter" class="progress progress-striped" style="display:none;">
<div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>

Или используйте CSS в их демонстрации для пользовательских CSS

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]