Question

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

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

我尝试做的大部分工作都可以通过uploadify或Jquery上传完成，但有一部分我似乎无法找到一个好的解决方案。

这是导致麻烦的第4步。在uploadify中，我注意到你可以设置一个项目模板，这样我就可以实际添加表单元素而不是问题。

问题在表单提交时开始，我似乎无法将事件输出或以任何方式将表单数据设置回任何位置以备回帖。

是否有人将其取消或能够为此提供解决方案。我愿意接受任何有用的事情......

提前致谢...

Answer 1

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

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

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

现在考虑执行以下操作：

按照文章中的说明自定义行模板。
捕获控件的add事件，并将add事件返回的数据项放入列表中。
单击表单上的按钮，阻止对其执行默认操作，然后为步骤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

带有其他表单数据的JQuery多文件上载

1 个答案: