Лучший способ создать неизвестное количество экземпляров JackUp
Мы используем JackUp для загрузки изображений ajax в Rails. Мы выбрали его, потому что он не очень много и довольно легкий.
Следуя его примеру кода, мы придумали что-то вроде этого:
let jackUp = new JackUp.Processor({
path: '/images'
});
jackUp.on('upload:imageRenderReady', (e, options) => {
options.image.attr("data-id", options.file.__guid__).css({
border: "5px solid red"
});
$('[data-behavior=image-block-container]').prepend(options.image);
}).on("upload:sentToServer", (e, options) => {
$(`img[data-id='${options.file.__guid__}']`).css({
borderColor: 'yellow'
});
}).on("upload:success", (e, options) => {
$(`img[data-id='${options.file.__guid__}']`).css({
borderColor: "green"
});
}).on("upload:failure", (e, options) => {
alert(`'${options.file.name}' upload failed; please retry`);
$(`img[data-id='${options.file.__guid__}']`).remove();
});
$('.file-drop').jackUpDragAndDrop(jackUp);
$(document).bind('drop dragover', e => {
e.preventDefault();
});
Это работает так же, как и ожидалось с одной кнопкой загрузки изображения (классифицируется как file-drop
). Однако на странице будет неизвестное количество этих кнопок загрузки изображений.
Если имеется более одной кнопки загрузки, каждый раз, когда файл добавляется, он добавляется ко всем image-block-container
элементы, а не только тот, который был целью. Похоже, что jackUp
не имеет понятия об элементе, который его вызвал.
Как лучше всего разрешить каждой кнопке загрузки знать, как она называется? Я пытался окружить его в .on('drop'...
блок. Это дало мне доступ к элементу, но ни одно из событий JackUp не сработало.
Любая помощь или совет для легкодоступного Rails-дружественного драгоценного камня загрузки ajax приветствуются!
1 ответ
Вы широко сопоставляете несколько частей вашей DOM с этим селектором запросов: $('[data-behavior=image-block-container]')
, Несколько элементов, соответствующих этому селектору, вероятно, являются причиной вашей странной проблемы с обновлением.
Если вы хотите настроить таргетинг только на элемент, с которым взаимодействовал пользователь, e
переменная в upload:imageRenderReady
Обработчик события должен иметь [target][1]
как правило, это то, с чем взаимодействовал пользователь, и он должен приблизить вас к тому, что вы хотите (в зависимости от структуры вашей DOM).
Из jQuery:
Свойство target может быть элементом, зарегистрированным для события, или его потомком.