帶附加表單數據的JQuery多文件上傳

Question

有沒有人有幸創建了多文件上傳解決方案，其中包含一些額外的表單數據。所以在這個例子中，工作流程就像這樣。

1. 用戶點擊添加文件/上傳按鈕
2. 用戶從文件選擇器
3. 幾個項目被添加到上傳隊列
4. 每個隊列項目可以選擇一個或多個文件有一個附加用戶輸入字段。例如在圖像/視頻標題
5. 用戶點擊上傳和要求去他們的方式向服務器

大多數的什麼，我試圖做可以像uploadify或jQuery的完成上傳，但有一部分我似乎無法找到一個好的解決方案。

這是第4步造成的麻煩。在uploadify我注意到你可以設置一個項目模板，所以我實際上可以添加表單元素沒有問題。

問題從表單提交時開始，我似乎無法得到一個事件或任何方式，我可以將該表單數據設置回任何地方回發。

有沒有人拉掉這個或能夠幫助解決這個問題。我願意接受任何會工作....提前

謝謝...

Answer 1

你完全可以用jQuery上傳做到這一點，它只是需要一些脅迫。該控件觸發一個添加事件，該事件返回用於向服務器提交請求的數據對象。爲添加到隊列中的每個項目添加一次。我沒有一個完整的演示，但這裏是它的精神...

首先，按照大多數的這篇文章中的步驟：

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

現在考慮執行下列操作：

1. 按照文章中的說明自定義行模板。

2. 捕獲控件的add事件並將add事件返回的數據項放入列表中。

3. 捕獲的表單上點擊一個按鈕，防止默認操作爲它隨後在2

所以，像這樣的咖啡叫data.submit在步驟期間捕獲的列表中每個項目腳本示例...

jQuery -> 

    queueItems = new Array() 

    $('#my_upload').fileupload 

    add: (e, data) -> 
     # after doing any other processing needed, keep a list of the data objects added 
     queueItems.push(data) 

    $('#form_submit').click (event) => 

     # don't do the default action 
     event.preventDefault() 

     for data in queueItems 

     # get the inputs from the row associated with this item in the queue 
     inputs = data.context.find(':input') 

     # get any other general hidden inputs from the page you want associated with the row. 
     # merge keeps the jquery search results in a format that works with serializeArray 
     inputs = $.merge(inputs, $("#some_field")) 

     # set the form data for the request 
     data.formData = inputs.serializeArray(); 

     #submit it 
     data.submit() 

     # reset the queue so if the user add's more items we don't submit twice 
     queueItems.length = 0