Да, вы его на скрине показали.Подключен ли в стандартный загрузчик прогресс бар
Стилизуйте его при помощи CSS и все.для полного счастья мне понадобился прогресс бар
Я видимо не совсем правильно выразился, имел в виду есть ли возможность включить такой вот прогресс бар процесса загрузки фото. http://v4-alpha.getbootstrap.com/components/progress/Да, вы его на скрине показали.
То есть процесс загрузки от 0 до 100%.
Фьюз имеет в виду, что вместо крутящихся стрелочек можно в стилях прилепить прогресс бар в прцентах.
Совершенно верно. Повторюсь, можно решить при помощи css вполне. В InstantVideo загрузчик видео файлов аналогичный и прогресс-бар стилизован css. Собственно можете глянуть на демо, загрузив файл.Фьюз имеет в виду, что вместо крутящихся стрелочек можно в стилях прилепить прогресс бар в прцентах.
там не выводится процент загрузки, я об этом и говорю как мне ее включить на данный момент выводится следующий код и все.Фьюз имеет в виду, что вместо крутящихся стрелочек можно в стилях прилепить прогресс бар в прцентах.
<ul class="qq-upload-list"> <li> <span class="qq-upload-file">download4.jpg</span> <span class="qq-upload-spinner"><i class="fa fa-refresh fa-spin fa-fw"></i></span> <span class="qq-upload-size" style="display: inline;">1.4MB</span> <a href="#" class="qq-upload-cancel">Отменить</a> <span class="qq-upload-failed-text">Ошибка</span> </li> <li> <span class="qq-upload-file">download5.jpg</span> <span class="qq-upload-spinner"><i class="fa fa-refresh fa-spin fa-fw"></i></span> <span class="qq-upload-size" style="display: inline;">1.9MB</span> <a href="#" class="qq-upload-cancel">Отменить</a><span class="qq-upload-failed-text">Ошибка</span> </li> </ul>
Посмотрел, на странице загрузки видео грузится дополнительный скрипт uploader.min.js и как я понял на этой странице мы имеем вначале кодВ InstantVideo загрузчик видео файлов аналогичный и прогресс-бар стилизован css. Собственно можете глянуть на демо, загрузив файл.
<script type="text/template" id="qq-template"> <div class="qq-uploader-selector qq-uploader"> <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container progress"> <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector progress-bar qq-total-progress-bar"></div> </div> <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone > <span class="qq-upload-drop-area-text-selector"><?php echo LANG_DROP_TO_UPLOAD; ?></span> </div> <div class="qq-upload-button-selector video-upload-button"></div> <span class="qq-drop-processing-selector qq-drop-processing"> <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> </span> <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals"> <li> <div class="qq-progress-bar-container-selector progress"> <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector progress-bar"><div class="percent_count"></div></div> </div> <span class="qq-upload-spinner-selector qq-upload-spinner"></span> <span class="qq-upload-file-selector qq-upload-file"></span> <span class="qq-upload-size-selector qq-upload-size"></span> <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel"><?php echo LANG_CANCEL; ?></button> <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> </li> </ul> </div> </script>
<script type="text/javascript"> <?php echo $this->getLangJS('LANG_TYPEERROR','LANG_SIZEERROR','LANG_MINSIZEERROR','LANG_EMPTYERROR','LANG_ONLEAVE','LANG_DROP_TO_UPLOAD', 'LANG_ERROR', 'LANG_UNSUPPORTEDBROWSERIOS8SAFARI','LANG_VIDEO_SELECT_FILE'); ?> function defaultText (){ $('#upload-button-text').html('<?php echo LANG_SELECT_VIDEO_FILE;?> <?php echo files_format_bytes($max_upload_file_size);?>'); $('#upload-drag-drop-description').html('<?php echo LANG_OR_DROP_FILE; ?>'); $('#privacy_select').show(); } $(function(){ defaultText(); var uploader = new qq.FineUploader({ debug: false, element: document.getElementById('video-uploader'), maxConnections: 1, multiple: false, messages: { emptyError: LANG_EMPTYERROR, minSizeError: LANG_MINSIZEERROR, onLeave: LANG_ONLEAVE, sizeError: LANG_SIZEERROR, typeError: LANG_TYPEERROR, unsupportedBrowserIos8Safari: LANG_UNSUPPORTEDBROWSERIOS8SAFARI }, text: { defaultResponseError: LANG_ERROR }, validation:{ acceptFiles: 'video/*', allowedExtensions: <?php echo $allow_ext; ?>, sizeLimit: '<?php echo $max_upload_file_size ?>', }, request: { endpoint: '<?php echo html(href_to($ctype['name'], 'add')); ?>?type=add_file' }, callbacks: { onComplete: function(id, file_name, result){ if(!result.success) { defaultText(); return; } else { window.location.href = result.redirect; } }, onProgress: function(id, fileName, loaded, total){ prc = Math.round(loaded / total * 100) + '%'; $('.progress-bar').width(prc); $('.percent_count').html(prc); i = -1; do { total = total / 1024; i++; } while (total > 99); format_size = Math.max(total, 0.1).toFixed(1) + ['<?php echo LANG_KB; ?>', '<?php echo LANG_MB; ?>', '<?php echo LANG_GB; ?>', 'TB', 'PB', 'EB'][i]; $('#file_size_info').html(', '+format_size); }, onCancel: function(id, fileName){ defaultText(); }, onSubmit: function (id, fileName) { if(!$('#video_category_id').val()){ $('.video-upload-button').css({'background-color': '#e74c3c'}); displayMsg('<?php echo LANG_CHANGE_CAT; ?>'); return false; } $('#upload-button-text').html('<?php echo LANG_PROCESS_UPLOADING_FILE; ?>'); $('#upload-drag-drop-description').html(fileName+'<span id="file_size_info"></span>'); $('.sess_messages, #privacy_select').hide(); this.setParams({ privacy_type: $('#privacy_select select').val(), category_id: $('#video_category_id').val() }, id); } }, showMessage: function(message){ displayMsg(message); } }); $('#video_category_id').on('change', function (){ if($(this).val()){ $('.video-upload-button').css({'background-color': ''}); $('.sess_messages').remove(); } else { $('.video-upload-button').css({'background-color': '#e74c3c'}); } }); function displayMsg(message){ $('.sess_messages').remove(); $('<div class="sess_messages"><div class="message_error">'+message+'</div></div>').prependTo('#body'); } }); </script>