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

我们使用JackUp进行Rails中的ajax图片上传。我们之所以选择它是因为它不会承担很多，而且重量很轻。创建未知数量的JackUp实例的最佳方法

按照它的示例代码中，我们提出了这样的事情：

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上传宝石感激！

来源

2016-04-18 Kieran E

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

如果你想要的目标只是用户与交互的元素，在upload:imageRenderReady事件处理e变量应该有一个[target][1]这通常是什么用户与互动，应该让你接近你想要什么（取决于你的DOM的结构）。

从jQuery的：

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

来源

2016-04-18 01:18:12 pherris

'upload：imageRenderReady'中的'e'似乎没有提及用户与之交互的内容。这就是'e'的样子：http://puu.sh/omnI9/650cdf2fd7.png这是'e.target' http://puu.sh/omnLR/015ff297f3.png。相信我，“e.target，currentTarget或delegateTarget”中没有任何内容对DOM元素有任何引用。他们似乎都在引用'jQuery11210678854975767535'，但我无法弄清楚是什么。当我查看'jQuery112 ...'对象时，没有什么值得注意的。 –

我假设你也看过'options'参数？我认为它会有'image'和'file'：https://github.com/thoughtbot/jack_up/blob/master/lib/assets/javascripts/jack_up/processor.coffee#L28 - 您可以使用' options.image.parentNode'或'options.image.parentNode.parentNode' ...如果没有，你可能需要为每个上传创建一个单独的JackUp实例并使用DOM ID约定（例如'id =“imageupload-01”'' ）来区分每个选择器。回购看起来很老旧 - 去年的许多PR没有合并。 – pherris

感谢您的建议！我最终分叉回购并修改它以实现此功能。 –

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

回答

相关问题