Статьи помеченные upload
Как отсортировать картинки мышкой
Сортировка строк мышкой
Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."
Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.
На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).
Как добавить атрибут к загруженному файлу
Добавление описания к файлу
Иногда важно определить дополнительную информацию для загружаемого файла. Например это может быть описание. В расширении yii2-uploader возможность добавить описание к файлу уже предусмотрена.
Кроме описания может быть добавлено и любое другое свойство. В предыдущем примере использовалось свойство when
типа radio
с двумя значениями - "до" и "после". Как добавить новое свойство?
Как сделать галерею фотографий "До и После"
Показ фотографий до и после момента времени
Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?
Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.
Делаем демо для загрузки фото
Загрузка жестко определенного количества файлов
Чтобы показать, как работает загрузка изображений, нужно разрешить загружать изображения на свой сайт. Но, в этом случае, дисковое пространство может быть быстро исчерпано и нужно как-то удалять оставленный посетителями "мусор".
Обычно загруженные файлы удаляются автоматически спустя время, но можно ограничить количество файлов - демо.
Поиск
Метки
- 1. Делаем демо для загрузки фото
- 2. Как сделать галерею фотографий "До и После"
- 3. Как добавить атрибут к загруженному файлу
- 4. Как отсортировать картинки мышкой
Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."
Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.
На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).
Пусть таблица, это список строк загруженных файлов. Каждая строчка в таблице имеет ID
.
В начале перетаскивания (кнопка мыши только нажата) необходимо считать по порядку ID
всех строк. Когда перетаскивание закончилось (кнопка отпущена), нужно опять собрать по порядку ID
всех строк.
Если порядок идентичный - перемещение строк не состоялось. Иначе нужно зафиксировать новый порядок строк.
Таков нехитрый алгоритм. Реализация с помощью jquery ui тоже не сложная.
$( function() { var before, after; function getRowsIds() { // get rows by .table selector var rows = $('#files-div .table li'), a = []; i = 0; $.each(rows, function(index, row) { // id is "row-123" a[i++] = row.id.substr(4); }); return JSON.stringify(a); } $( "#sortable" ).sortable({ revert: true, start: function( event, ui ) {before = getRowsIds()}, update: function( event, ui ) { after = getRowsIds(); if(before != after) { // save new order $.ajax({ method: "POST", url: "controller/swap", data: {ids: after}, success: function(id, status, xhr) {} }); } } }); $( "#draggable" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "ul, li" ).disableSelection(); });
Осталось определить в контроллере действие, записывающее новый порядок по ajax-запросу.
В расширении yii2-uploader информация обо всех загруженных файлах хранится в одной таблице OneFile
. Поэтому действие очень короткое.
public function actionSwap() { if(Yii::$app->request->isAjax) { $ids = json_decode(Yii::$app->request->post('ids')); $time = time(); $j = 0; for($i = 0; $i < count($ids); $i++) { $model = OneFile::findOne($ids[$i]); // rows will be sorted by time $model->created_at = $time + $i; if($model->save()) $j++; } echo $j; } }
Сортировка строк будет выполняться по полю created_at
. Соответственно, при выборе всех файлов, принадлежащих модели, нужно добавить сортировку. Например для модели Post
.
public function getFiles() { return $this->hasMany(OneFile::className(), ['parent_id' => 'id']) ->where('model=:model', [':model' => 'common\models\Post']) ->orderBy('created_at'); }
Новый порядок строк сохраняется при каждом перетаскивании. Значит меняются местами только две строки и ID
остальных строк можно не передавать на сервер. Как? Вы можете посмотреть на gitHub.
Заключение
Собственно это только анонс нового свойства модуля загрузки фото и вообще файлов. Возможность сортировать строки перетаскиванием по умолчанию отключена и нужно не забыть установить флаг draggable
при вызове виджета.
Оставьте комментарий
Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.
Можно авторизоваться, используя социальную сеть-
-
-