Question

我将回答这个问题

我希望允许我的用户一次上传多个文件，并希望使用FancyUpload来执行此操作。我可以获得FancyUpload的基本版本，但我现在需要允许用户为每个文件指定一些元数据，例如标题或标题。

不幸的是，我遇到了一些问题。首先，我需要直观地链接文件的输入与该文件。选择要上载的文件后，FancyUpload会显示这些文件的列表。因此，根据选择的文件数量，我需要不同数量的输入，我还需要将每个输入与特定文件相关联。

其次，我需要将元数据与文件一起发布。但是，FancyUpload仅允许您为每个文件指定元数据。也就是说，我可以输入并将其添加为POST参数，但随后每个文件都将接收该参数。我需要能够为每个发送的文件指定一个标题。

Answer 1

请注意，此答案假定您具有JavaScript和Mootools的应用知识。我将依次解决每个问题：

渲染输入

事实证明，每个文件的呈现都是由FancyUpload2.File类上的方法处理的。要改变它，我们需要按如下方式实现它：

FancyUpload2.File.implement({
    render: function() {
    //copy the entire render function in here
    }
});

确保复制整个渲染功能。目前，这将使用默认的渲染方法覆盖默认的渲染方法。但是，我们只想改变渲染过程，而不是重写它，所以这很好。该方法的大约一半是行this.element = new Element('li', {'class': 'file'}).adopt(，然后是FancyUpload将呈现的采用方法内的元素列表。在采用方法的最后，输入以下内容：

new Element('input', {'class': 'caption', 'name': 'caption[]', 'type': 'text'})

如您所见，这将在列表中添加一个新输入，旨在获取用户的标题。您可能还想添加标签和任何其他表单元素。

现在，如果你选择了一些文件，你会发现它们都是用你指定的额外元素渲染的。

发布输入

创建FancyUpload对象时，需要在其options对象中指定一个新事件：

onBeforeStart: function() {
    var listSize = this.fileList.length;
    for (var i=0; i < listSize; i++){
        var caption = this.fileList[i].element.getElement('input.caption').get('value');
        var opts = $merge(this.options.data, {
            'caption': caption
        });
        this.fileList[i].setOptions({'data' : opts});
    }
}

在发送AJAX请求之前，

onBeforeStart被触发。这意味着我们在这里所做的任何事情都将在用户完成输入数据之后和数据发送之前完成。辉煌！我们需要将新数据添加到每个文件中，因此首先要做的是迭代文件列表。然后我们找到标题输入的值与列表中的当前文件关联，并将其分配给var caption。

然后我们使用this.options.data访问文件数据并使用$merge创建一个包含所有数据和新数据的新对象。我们将此对象分配给var opts。最后，我们使用setOptions覆盖文件原始选项。现在，当文件发送时，out数据随之一起发送，如果您使用的是PHP，则可以从$ _POST访问。

致谢：我找到了解决this post中第二个问题的关键。

如何自定义FancyUpload以上传多个文件，每个文件都有自己的数据（例如标题，标题）？

1 个答案:

渲染输入

发布输入