Fine-Uploader:获取原始触发元素(点击,或放下)
Fine-Uploader: Getting the original triggered element (clicked, or dropped)
我有一个 fineuploader 实例,并安装了一些放置目标和按钮。
我的安排方式类似于 Google Drive 的上传功能,其中有一个集中的上传框,列出了所有正在进行的文件,完成后,我想做一些 DOM 对原始触发元素(放置目标或按钮)进行操作,并在其中放置预览和一些细节。
要进行 DOM 操作,我想获取原始触发元素。
为了更清楚地说明这一点,下面是我如何初始化拖放元素:
$('.drop-zone').fineUploaderDnd({
classes: {
dropActive: "cssClassToAddToDropZoneOnEnter"
}
})
.on('processingDroppedFiles', function(event) {
//TODO: display some sort of a "processing" or spinner graphic
})
.on('processingDroppedFilesComplete', function(event, files, dropTarget) {
//TODO: hide spinner/processing graphic
$gallery_upload.fineUploaderS3('addFiles', files); //this submits the dropped files to Fine Uploader
});
这是我初始化按钮的方式:
$gallery_upload.fineUploaderS3({
...
extraButtons: [{
element: $(".pdf-button"),
validation: {
allowedExtensions: ["jpg"]
}
}],
...
我正在阅读有关 fineuploader 的文档,但没有找到任何变量来解释这种可能性。
我想知道这是否可行,如果可行,请给我一些帮助。
非常感谢您的帮助!
干杯,
托马斯
============================================= =
所以从一开始,我就不应该使用单独的模块:
$('.drop-zone').fineUploaderDnd({...
现在,我已经将 Dnd 的代码修改为以下内容,然后,Ray 的解决方案将与它很好地配合使用:
$gallery_upload.fineUploaderS3({
dragAndDrop: {
extraDropzones: [ $('.drop-zone') ]
},
...
onValidate
event handler is passed an HTMLElement
pointing to the upload button associated with the file. You can also use the getButton
API method 根据文件 ID 查找与特定文件关联的按钮。
Fine Uploader 还会将 qqDropTarget
属性 添加到已删除的 File
对象上。此 属性 的值是处理拖放文件的拖放区元素。这只能通过集成的 DnD(Fine Uploader UI)放置工具(不是独立的)完成。出于某种原因,这没有记录在案,我将不得不尝试记住原因。如果这只是一个疏忽,我会将其添加到文档中。
我有一个 fineuploader 实例,并安装了一些放置目标和按钮。
我的安排方式类似于 Google Drive 的上传功能,其中有一个集中的上传框,列出了所有正在进行的文件,完成后,我想做一些 DOM 对原始触发元素(放置目标或按钮)进行操作,并在其中放置预览和一些细节。
要进行 DOM 操作,我想获取原始触发元素。
为了更清楚地说明这一点,下面是我如何初始化拖放元素:
$('.drop-zone').fineUploaderDnd({
classes: {
dropActive: "cssClassToAddToDropZoneOnEnter"
}
})
.on('processingDroppedFiles', function(event) {
//TODO: display some sort of a "processing" or spinner graphic
})
.on('processingDroppedFilesComplete', function(event, files, dropTarget) {
//TODO: hide spinner/processing graphic
$gallery_upload.fineUploaderS3('addFiles', files); //this submits the dropped files to Fine Uploader
});
这是我初始化按钮的方式:
$gallery_upload.fineUploaderS3({
...
extraButtons: [{
element: $(".pdf-button"),
validation: {
allowedExtensions: ["jpg"]
}
}],
...
我正在阅读有关 fineuploader 的文档,但没有找到任何变量来解释这种可能性。
我想知道这是否可行,如果可行,请给我一些帮助。
非常感谢您的帮助!
干杯, 托马斯
============================================= =
所以从一开始,我就不应该使用单独的模块: $('.drop-zone').fineUploaderDnd({...
现在,我已经将 Dnd 的代码修改为以下内容,然后,Ray 的解决方案将与它很好地配合使用:
$gallery_upload.fineUploaderS3({
dragAndDrop: {
extraDropzones: [ $('.drop-zone') ]
},
...
onValidate
event handler is passed an HTMLElement
pointing to the upload button associated with the file. You can also use the getButton
API method 根据文件 ID 查找与特定文件关联的按钮。
Fine Uploader 还会将 qqDropTarget
属性 添加到已删除的 File
对象上。此 属性 的值是处理拖放文件的拖放区元素。这只能通过集成的 DnD(Fine Uploader UI)放置工具(不是独立的)完成。出于某种原因,这没有记录在案,我将不得不尝试记住原因。如果这只是一个疏忽,我会将其添加到文档中。