Dropify / Дизайн / Плагины Bootstrap

Версия: v1.0.2

Каталог: Плагины Bootstrap

Категория: Дизайн

Bootstrap: 3, 4, 5

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

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

Вес файла: 379.0 Kb

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

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

Скачать бесплатно

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

Скачали бесплатно: 54 раз

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

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

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

Авторство: https://github.com/JeremyFagis/dropify

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

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

Теги: type=file, Plugin, input theme, input style, Drag & Drop, Bootstrap

Поделился: BootstrapТема

Добавлено: 2018-01-11 в 15:24

Метка: 1674236830

⇄ ⇅

<div class="container"><h1 class="text-center">Dropify & BootstrapTema</h1>
 <div class="row">
 <div class="col-sm-3"></div>
 <div class="col-sm-6">
 <h2>Before</h2>
 <label for="input-file-before">Basic HTML input file</label>
 <input type="file" id="input-file-before" />
 <hr />
 <h2>Now</h2>
 <label for="input-file-now">Your so fresh input file вЂ” Default version</label>
 <input type="file" id="input-file-now" class="dropify" />
 <br />
 <label for="input-file-now-custom-1">You can add a default value</label>
 <input type="file" id="input-file-now-custom-1" class="dropify" data-default-file="https://bootstraptema.ru/plugins/2018/dropify/demo-dropify.jpg" />
 <br />
 <label for="input-file-now-custom-2">You can set the height</label>
 <input type="file" id="input-file-now-custom-2" class="dropify" data-height="500" />
 <br />
 <label for="input-file-now-custom-3">You can combine options</label>
 <input type="file" id="input-file-now-custom-3" class="dropify" data-height="500" data-default-file="https://bootstraptema.ru/plugins/2018/dropify/demo-dropify.jpg" />
 <br />
 <label for="input-file-now-disabled-1">You can disabled the input</label>
 <input type="file" id="input-file-now-disabled-1" class="dropify" disabled="disabled" />
 <br />
 <label for="input-file-now-disabled-2">Also with a default file</label>
 <input type="file" id="input-file-now-disabled-2" class="dropify" disabled="disabled" data-default-file="https://bootstraptema.ru/plugins/2018/dropify/demo-dropify.jpg" />
 <br />
 <label for="input-file-max-fs">You can add a max file size</label>
 <input type="file" id="input-file-max-fs" class="dropify" data-max-file-size="2M" />
 <br />
 <label for="input-file-disable-remove">You can disable remove button</label>
 <input type="file" id="input-file-disable-remove" class="dropify" data-show-remove="false" />
 <br />
 <label for="input-file-events">You can use events</label>
 <input type="file" id="input-file-events" class="dropify-event" data-default-file="https://bootstraptema.ru/plugins/2018/dropify/demo-dropify.jpg" />
 <br />
 <label for="input-file-to-destroy">You can destroy it <button type="button" id="toggleDropify">Init/Destroy</button></label>
 <input type="file" id="input-file-to-destroy" class="dropify" data-default-file="https://bootstraptema.ru/plugins/2018/dropify/demo-dropify.jpg" />
 <br />
 <label for="input-file-to-destroy">Multiple options are available</label>
 <input type="file" id="input-file-to-destroy" class="dropify" data-allowed-formats="portrait square" data-max-file-size="2M" data-max-height="2000" />
 <p class="help">Only portrait or square images, 2M max and 2000px max-height.</p>
 <br />
 <h2>French one</h2>
 <label for="input-file-french-1">"Et voilГ "</label>
 <input type="file" id="input-file-french-1" class="dropify-fr" data-default-file="" />
 <br />
 <label for="input-file-french-2">"Avec options"</label>
 <input type="file" id="input-file-french-2" class="dropify-fr" data-height="350" data-default-file="https://bootstraptema.ru/plugins/2018/dropify/demo-dropify.jpg" />
 </div>
 </div>
 </div>

// Translated
 $('.dropify-fr').dropify({
 messages: {
 default: 'Glissez-dГ©posez un fichier ici ou cliquez',
 replace: 'Glissez-dГ©posez un fichier ou cliquez pour remplacer',
 remove: 'Supprimer',
 error: 'DГ©solГ©, le fichier trop volumineux'
 }
 });

// Used events
 var drEvent = $('#input-file-events').dropify();

drEvent.on('dropify.beforeClear', function(event, element){
 return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
 });

drEvent.on('dropify.afterClear', function(event, element){
 alert('File deleted');
 });

drEvent.on('dropify.errors', function(event, element){
 console.log('Has Errors');
 });

BootstrapTema

Dropify

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0