3

有没有人幸运地创建了一个包含一些额外表单数据的多文件上传解决方案。所以在这个例子中，工作流程是这样的。

  1. 用户点击添加文件/上传按钮
  2. 用户从文件选择器中选择一个或多个文件
  3. 几个项目被添加到上传队列
  4. 每个队列项目都有一个附加的用户输入字段。例如图像/视频的标题
  5. 用户点击上传，请求继续发送到服务器

我想要做的大部分事情都可以通过uploadify 或Jquery upload 之类的方法来完成，但有一部分我似乎找不到一个好的解决方案。

造成麻烦的是第4步。在uploadify 中，我注意到您可以设置一个项目模板，这样我实际上可以添加表单元素没有问题。

当表单提交时，问题就开始了，我似乎无法获得事件或任何方式我可以将表单数据设置回任何地方以进行回发。

有没有人解决这个问题或能够帮助解决这个问题。我对任何可行的事情都持开放态度......

提前致谢 ...

4

1 回答 1

4

你完全可以用 JQuery-Upload 来做到这一点，它只需要一些强制。控件触发添加事件，该事件返回用于向服务器提交请求的数据对象。对于添加到队列中的每个项目，都会调用一次 Add。我没有完整的演示，但这里是它的要点......

首先，按照本文中的大部分步骤进行操作：

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

现在考虑执行以下操作：

  1. 按照文章中的说明自定义行模板。

  2. 捕获控件的添加事件，并将添加事件返回的数据项放入列表中。

  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
于 2013-02-16T10:15:33.073 回答