0

我们使用JackUp在 Rails 中上传 ajax 图像。我们之所以选择它，是因为它不需要太多假设，而且重量很轻。

在它的示例代码之后，我们想出了这样的东西：

  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 上传 gem 的帮助或建议都将不胜感激！

4

1 回答 1

0

您正在使用此查询选择器广泛匹配 DOM 的多个部分：$('[data-behavior=image-block-container]'). 与此选择器匹配的多个元素可能是您奇怪的更新问题的原因。

如果您只想定位用户正在与之交互的元素，e则事件处理程序中的变量upload:imageRenderReady应该有一个[target][1]通常是用户正在与之交互的变量，并且应该让您接近您想要的（取决于您的 DOM 的结构）。

来自 jQuery：

目标属性可以是为事件注册的元素或它的后代。

于 2016-04-18T01:18:12.550 回答