帶有其他表單數據的JQuery多文件上載

Question

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

1. 用戶單擊添加文件/上傳按鈕
2. 用戶從文件選擇器中選擇一個或多個文件
3. 幾個項目被添加到上傳隊列中
4. 每個隊列項都有一個額外的用戶輸入字段。 例如圖像/視頻的標題
5. 用戶點擊上傳，請求繼續前往服務器

我嘗試做的大部分內容都可以通過uploadify或Jquery上傳來完成，但有一部分我似乎無法找到一個好的解決方案。

這是導致麻煩的第4步。 在uploadify中，我注意到你可以設置一個項目模板，這樣我就可以實際添加表單元素而不是問題。

問題在表單提交時開始，我似乎無法獲取事件或以任何方式將表單數據設置回任何位置以備回帖。

有沒有人取消這個或能夠幫助解決這個問題。 我願意接受任何可行的事情....

提前致謝 ...

Answer 1

您可以使用JQuery-Upload完全執行此操作，它只需要一些強制執行。 該控件觸發一個add事件，該事件返回一個用於向服務器提交請求的數據對象。 添加到隊列的每個項目都會調用一次Add。 我沒有完整的演示，但這里是它的要點......

首先，按照本文中的大多數步驟操作：

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