Drag и Drop закачка перетаскиванием Fine / Элементы / Сниппеты Bootstrap | BootstrapТема

Drag и Drop закачка перетаскиванием Fine

Drag и Drop закачка перетаскиванием Fine

Адаптивный элемент Фине для драг и дроп закачки файлов перетаскиванием, готовый HTML пример демо для использования с Bootstrap.

* Закачка будет работать при подключенном адресе сервера, используемый плагин находится: https://bootstraptema.ru/stuff/plugins_bootstrap/bootstrap_3/fine_uploader/12-1-0-320

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 321

Количество символов:

Посмотрели: 2589 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, drop, сниппет, Bootstrap, element, html, элемент, upload, Drag, закачка

Поделился: aTmpl

Добавлено: 2015-12-17 в 00:34

Метка: 1581767831

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/fine-uploader/fine-uploader-new.css" />
<script type="text/javascript" src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://bootstraptema.ru/plugins/2015/fine-uploader/jquery.fine-uploader.js"></script>

<div class="container">
<div class="row"> 
<div class="col-lg-6 col-lg-offset-3">

<script type="text/template" id="qq-template-gallery">
 <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
 <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
 <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-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"></span>
 </div>
 <div class="qq-upload-button-selector qq-upload-button">
 <div>Upload files</div>
 </div>
 <span class="qq-drop-processing-selector qq-drop-processing">
 <span>Processing dropped files...</span>
 <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
 </span>
 <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
 <li>
 <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
 <div class="qq-progress-bar-container-selector qq-progress-bar-container">
 <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
 </div>
 <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
 <div class="qq-thumbnail-wrapper">
 <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
 </div>
 <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
 <button type="button" class="qq-upload-retry-selector qq-upload-retry">
 <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
 Retry
 </button>

<div class="qq-file-info">
 <div class="qq-file-name">
 <span class="qq-upload-file-selector qq-upload-file"></span>
 <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
 </div>
 <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
 <span class="qq-upload-size-selector qq-upload-size"></span>
 <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
 <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
 </button>
 <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
 <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
 </button>
 <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
 <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
 </button>
 </div>
 </li>
 </ul>

<dialog class="qq-alert-dialog-selector">
 <div class="qq-dialog-message-selector"></div>
 <div class="qq-dialog-buttons">
 <button type="button" class="qq-cancel-button-selector">Close</button>
 </div>
 </dialog>

<dialog class="qq-confirm-dialog-selector">
 <div class="qq-dialog-message-selector"></div>
 <div class="qq-dialog-buttons">
 <button type="button" class="qq-cancel-button-selector">No</button>
 <button type="button" class="qq-ok-button-selector">Yes</button>
 </div>
 </dialog>

<dialog class="qq-prompt-dialog-selector">
 <div class="qq-dialog-message-selector"></div>
 <input type="text">
 <div class="qq-dialog-buttons">
 <button type="button" class="qq-cancel-button-selector">Cancel</button>
 <button type="button" class="qq-ok-button-selector">Ok</button>
 </div>
 </dialog>
 </div>
 </script>

<div id="fine-uploader-gallery"></div>

<script>
var galleryUploader = new qq.FineUploader({
 element: document.getElementById("fine-uploader-gallery"),
 template: 'qq-template-gallery',
 request: {
 endpoint: '/success.html',
 method: 'GET' // Only for the gh-pages demo website due to Github Pages limitations
 },
 thumbnails: {
 placeholders: {
 waitingPath: 'https://bootstraptema.ru/plugins/2015/fine-uploader/waiting-generic.png',
 notAvailablePath: 'https://bootstraptema.ru/plugins/2015/fine-uploader/not_available-generic.png'
 }
 },
 validation: {
 allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
 },
 debug: true
});
</script>

</div>
</div>
</div>