Question

我们在Rails中使用JackUp进行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上传宝石的任何帮助或建议表示赞赏！

Answer 1

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

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

来自jQuery：

target属性可以是为事件注册的元素或其后代。

创建未知数量的JackUp实例的最佳方法

1 个答案: