带附加表单数据的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