带有其他表单数据的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