2

I've been messing around with this for quite some time. The deeper I get the more tweaks I need to make. My biggest issue id being able to correctly reference the created li item once it is created.

For exampled once an image is uploaded a new li item is created. Then I reference this li element to make various changes. Such as add in thumb nail and custom buttons. This reference is required for various reasons.

Most of everything is working fine from deleting to error output etc. However the way I find reference to the corresponding li element is broken.

From what I can tell on complete is as such

onComplete(String id, String name, Object responseJSON, XMLHttpRequest xhr)

There is no much data on this but from I can gather the ID is a number represented the uploaded image in the order of the list. Possibly an internal list which would mirror the outputted list.

So I've been marrying up this id with the index id of the array of li elements. This has allowed me to the located the correct completed li element and manipulate it.

So this works fine. The issue is when I'm deleting images. Image are deleted and then the li elements removed. However the issue is that the onComplete ID does not marry up with the with the index within the list.

I'm using a custom delete function as my images are saved in a database and other reasons. I will also run into the same issue when prepoluating the list. Currently I plan to pre-output a copy of the list with the relevant data in exactly the same way. I cannot find any information on prepopulating the fineuplader.

So is there a way to accurately reference the newly complete li elements? Once that is constant on most browsers? How is the best way to prepopulate the list?

Really a simple reference within the oncomplete handler to the new dom li element would be perfect. Or anything similar. I'm surprised it does not exist. Maybe it does but I cannot find any info on it.

Thanks

4

1 回答 1

1

我假设您使用的是默认的 Fine Uploader UI，而不是 FineUploaderBasic/core。在这种情况下，很容易获得 Fine Uploader 为关联文件创建的 DOM 元素的句柄。例如，在onComplete回调中：

....
onComplete: function(id, name, response, xhrOrXdr) {
    var listItemEl = this.getItemByFileId(id);    
    // do something with this element
}

我提供了一个非 jQuery 示例，因为您的示例代码似乎没有使用 jQuery，即使您已将此问题标记为 jQuery。如果您使用的是 jQuery 插件，您的代码将如下所示：

$('#myFineUploaderContainer').on('complete', function(event, id, name, response, xhrOrXdr) {
    var $listItem = $(this).fineUploader('getItemByFileId', id);
    // do something with this jQuery object
});

请注意，在上面的示例中，Fine Uploader 3.6 及更早版本将返回 Node/HTMLElement，而 Fine Uploader 3.7 及更高版本将返回预期的 jQuery 对象。假设您使用的是 3.7，我编写了上面的示例。

有关此和其他 API 方法、选项和回调的更多信息，请参阅http://docs.fineuploader.com上的文档。

于 2013-07-16T14:26:01.950 回答