fineuploader圖片上傳包含標題與上傳的文件

Question

我有一個遺留應用程序，有五個單獨的文件上傳爲單個數據庫記錄。除了每個文件上傳之外，還有一個字段用於輸入上傳文件的標題。

我正在考慮用fineUploader圖庫替換整個批次，並允許上傳最多10個文件。

然而，在網絡顯示時，在舊系統上爲圖像的ALT標記提供每個圖像的標題是有用的。

我可以解決這個問題，使用fineuploader和每個標題字段的多個單一文件上傳，但我想擺脫這麼多的頁面。

我看到有一個選項可以在上傳過程中更改文件名，這可能是一個選項，但這可能會導致非常長/雜亂的文件名，並可能導致重音和其他字符出現問題。

任何人都可以提出一個好方法嗎？

Answer 1

我建議考慮使用內置的編輯文件名功能，因爲這對我來說似乎最合適，而且肯定是最簡單的方法。

另一種方法涉及以下內容：

1. 文件輸入字段添加到您的精細上傳模板。這將保存用戶輸入的標題值。您可能還需要一些CSS以使其看起來適合您的項目。
2. 使用autoUpload option設置爲false來初始化Fine上傳器。這將允許用戶輸入字幕，然後通過單擊按鈕（稍後添加）來上傳文件。
3. 註冊一個onUpload callback handler。在這裏，您將讀取存儲在文本輸入中的關聯文件標題的值，並將其與setParams API method的文件關聯起來。

的your template文件列表部分可能是這個樣子：

<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals"> 
    <li> 
     ... 
     <input class="caption"> 
    </li> 
</ul> 

而美好的上傳代碼將包含這個邏輯（如request.endpoint和element重要的，但不相關的選項排除在外，以保持專注你的問題）：

var uploader = new qq.FineUploader({ 
    autoUpload: false, 
    callbacks: { 
     onUpload: function(id) { 
     var fileContainer = this.getItemByFileId(id) 
     var captionInput = fileContainer.querySelector('.caption') 
     var captionText = captionInput.value 

     this.setParams({caption: captionText}, id) 
     } 
    } 
}) 

您的服務器將收到相關的值「註釋」參數爲每個文件的上傳請求的一部分。