Я пытаюсь установить загрузчик, который имеет широкую кросс-браузерную совместимость (особенно для старых браузеров), но показывает, когда это возможно, индикатор выполнения и, возможно, слова «Загрузка …», если это невозможно.
LPology Simple Ajax Uploader Кажется, у меня есть нужные мне функции, и его легко установить, но я бьюсь головой о стену. Как вы можете сказать, я новичок в JavaScript.
Вот что я сделал …
Соберите файл 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()
));
}
Попробовал следующий код на моей странице (сценарий почти дословно основан на примере кросс-браузера в 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 говорит мне, что «прогресс» — ноль. Спасибо большое за вашу помощь!
Вам нужно иметь начальную загрузку, чтобы показать индикатор выполнения
<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
Других решений пока нет …