如何自定義FancyUpload以上傳多個文件，每個文件都有自己的數據（例如標題，標題）？

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將呈現的accept方法內的元素列表。在采用方法的最后，輸入以下內容：

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被觸發。 這意味着我們在用戶完成輸入數據之后以及發送數據之前將執行此處的所有操作。 輝煌！ 我們需要將新數據添加到每個文件，因此要做的第一件事是遍歷文件列表。 然后，在列表中找到與當前文件關聯的caption輸入的值，並將其分配給var caption 。

然后，我們使用this.options.data訪問文件數據，並使用$merge創建一個包含所有數據和新數據的新對象。 我們將此對象分配給var opts 。 最后，我們使用setOptions覆蓋文件的原始選項。 現在，發送文件后，輸出的數據將隨文件一起發送，如果使用PHP，則可以從$ _POST訪問。

鳴謝：我在這篇文章中找到了解決第二個問題的關鍵。