Возможно ли не большими усилиями подключить прогресс бар загрузки фото во второй ветке?

#1 29 июня 2016 в 09:49
Ковыряюсь в шаблоне, в данный момент изменяю внешний вид загрузки фотографий. Все что мог изменил, подумал а получится ли как то приукрасить сам процесс загрузки фото, но для полного счастья мне понадобился прогресс бар. Подключен ли в стандартный загрузчик прогресс бар и возможно ли подключить сторонний скрипт для выводе прогресс бара?
Прикрепленный файл
minimascreencapture20160629094343_r2lis.jpg 114 Кб
#2 29 июня 2016 в 10:14

Подключен ли в стандартный загрузчик прогресс бар

Atid — Gorec
Да, вы его на скрине показали.

для полного счастья мне понадобился прогресс бар

Atid — Gorec
Стилизуйте его при помощи CSS и все.
#3 29 июня 2016 в 22:43

Да, вы его на скрине показали.

Fuze
Я видимо не совсем правильно выразился, имел в виду есть ли возможность включить такой вот прогресс бар процесса загрузки фото. http://v4-alpha.getbootstrap.com/components/progress/
То есть процесс загрузки от 0 до 100%.
#4 29 июня 2016 в 22:50
Atid — Gorec,
Фьюз имеет в виду, что вместо крутящихся стрелочек можно в стилях прилепить прогресс бар в прцентах.
#5 29 июня 2016 в 22:55

Фьюз имеет в виду, что вместо крутящихся стрелочек можно в стилях прилепить прогресс бар в прцентах.

HiAndy
Совершенно верно. Повторюсь, можно решить при помощи css вполне. В InstantVideo загрузчик видео файлов аналогичный и прогресс-бар стилизован css. Собственно можете глянуть на демо, загрузив файл.
#7 30 июня 2016 в 15:08

Фьюз имеет в виду, что вместо крутящихся стрелочек можно в стилях прилепить прогресс бар в прцентах.

HiAndy
там не выводится процент загрузки, я об этом и говорю как мне ее включить на данный момент выводится следующий код и все.
  1. <ul class="qq-upload-list">
  2. <li>
  3. <span class="qq-upload-file">download4.jpg</span>
  4. <span class="qq-upload-spinner"><i class="fa fa-refresh fa-spin fa-fw"></i></span>
  5. <span class="qq-upload-size" style="display: inline;">1.4MB</span>
  6. <a href="#" class="qq-upload-cancel">Отменить</a>
  7. <span class="qq-upload-failed-text">Ошибка</span>
  8. </li>
  9. <li>
  10. <span class="qq-upload-file">download5.jpg</span>
  11. <span class="qq-upload-spinner"><i class="fa fa-refresh fa-spin fa-fw"></i></span>
  12. <span class="qq-upload-size" style="display: inline;">1.9MB</span>
  13. <a href="#" class="qq-upload-cancel">Отменить</a><span class="qq-upload-failed-text">Ошибка</span>
  14. </li>
  15. </ul>
То есть как видно прогресс бара тут в коде нет, я плохо разбираюсь в js и не знаю как ее включить.

В InstantVideo загрузчик видео файлов аналогичный и прогресс-бар стилизован css. Собственно можете глянуть на демо, загрузив файл.

Fuze
Посмотрел, на странице загрузки видео грузится дополнительный скрипт uploader.min.js и как я понял на этой странице мы имеем вначале код
  1. <script type="text/template" id="qq-template">
  2. <div class="qq-uploader-selector qq-uploader">
  3. <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container progress">
  4. <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>
  5. </div>
  6. <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone >
  7. <span class="qq-upload-drop-area-text-selector"><?php echo LANG_DROP_TO_UPLOAD; ?></span>
  8. </div>
  9. <div class="qq-upload-button-selector video-upload-button"></div>
  10. <span class="qq-drop-processing-selector qq-drop-processing">
  11. <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
  12. </span>
  13. <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
  14. <li>
  15. <div class="qq-progress-bar-container-selector progress">
  16. <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>
  17. </div>
  18. <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
  19. <span class="qq-upload-file-selector qq-upload-file"></span>
  20. <span class="qq-upload-size-selector qq-upload-size"></span>
  21. <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel"><?php echo LANG_CANCEL; ?></button>
  22. <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
  23. </li>
  24. </ul>
  25. </div>
  26. </script>
а конце
  1. <script type="text/javascript">
  2. <?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'); ?>
  3. function defaultText (){
  4. $('#upload-button-text').html('<?php echo LANG_SELECT_VIDEO_FILE;?> <?php echo files_format_bytes($max_upload_file_size);?>');
  5. $('#upload-drag-drop-description').html('<?php echo LANG_OR_DROP_FILE; ?>');
  6. $('#privacy_select').show();
  7. }
  8. $(function(){
  9. defaultText();
  10. var uploader = new qq.FineUploader({
  11. debug: false,
  12. element: document.getElementById('video-uploader'),
  13. maxConnections: 1,
  14. multiple: false,
  15. messages: {
  16. emptyError: LANG_EMPTYERROR,
  17. minSizeError: LANG_MINSIZEERROR,
  18. onLeave: LANG_ONLEAVE,
  19. sizeError: LANG_SIZEERROR,
  20. typeError: LANG_TYPEERROR,
  21. unsupportedBrowserIos8Safari: LANG_UNSUPPORTEDBROWSERIOS8SAFARI
  22. },
  23. text: {
  24. defaultResponseError: LANG_ERROR
  25. },
  26. validation:{
  27. acceptFiles: 'video/*',
  28. allowedExtensions: <?php echo $allow_ext; ?>,
  29. sizeLimit: '<?php echo $max_upload_file_size ?>',
  30. },
  31. request: {
  32. endpoint: '<?php echo html(href_to($ctype['name'], 'add')); ?>?type=add_file'
  33. },
  34. callbacks: {
  35. onComplete: function(id, file_name, result){
  36. if(!result.success) {
  37. defaultText();
  38. return;
  39. } else {
  40. window.location.href = result.redirect;
  41. }
  42. },
  43. onProgress: function(id, fileName, loaded, total){
  44. prc = Math.round(loaded / total * 100) + '%';
  45. $('.progress-bar').width(prc);
  46. $('.percent_count').html(prc);
  47. i = -1;
  48. do {
  49. total = total / 1024;
  50. i++;
  51. } while (total > 99);
  52.  
  53. 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];
  54. $('#file_size_info').html(', '+format_size);
  55. },
  56. onCancel: function(id, fileName){
  57. defaultText();
  58. },
  59. onSubmit: function (id, fileName) {
  60. if(!$('#video_category_id').val()){
  61. $('.video-upload-button').css({'background-color': '#e74c3c'});
  62. displayMsg('<?php echo LANG_CHANGE_CAT; ?>');
  63. return false;
  64. }
  65. $('#upload-button-text').html('<?php echo LANG_PROCESS_UPLOADING_FILE; ?>');
  66. $('#upload-drag-drop-description').html(fileName+'<span id="file_size_info"></span>');
  67. $('.sess_messages, #privacy_select').hide();
  68. this.setParams({
  69. privacy_type: $('#privacy_select select').val(),
  70. category_id: $('#video_category_id').val()
  71. }, id);
  72. }
  73. },
  74. showMessage: function(message){
  75. displayMsg(message);
  76. }
  77. });
  78. $('#video_category_id').on('change', function (){
  79. if($(this).val()){
  80. $('.video-upload-button').css({'background-color': ''});
  81. $('.sess_messages').remove();
  82. } else {
  83. $('.video-upload-button').css({'background-color': '#e74c3c'});
  84. }
  85. });
  86. function displayMsg(message){
  87. $('.sess_messages').remove();
  88. $('<div class="sess_messages"><div class="message_error">'+message+'</div></div>').prependTo('#body');
  89. }
  90. });
  91. </script>
в котором как я понял написано что вместо стандартных дивов будем использовать этот и грузить туда такие то данные. попробую разобраться и сделать.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.