如何在每个表格行中附加表单及其文件输入？答案

【问题标题】：How can I append a form and its file input in each table row?如何在每个表格行中附加表单及其文件输入？
【发布时间】：2012-04-07 03:38:25
【问题描述】：

我有一个 Jsfiddle 应用程序 here。如果您在文本区域中输入问题，然后单击“添加问题”按钮，它会在下表中附加问题和问题编号（如果您愿意，可以测试几次）。

现在表格下方是一个文件输入，它以另一种形式存储。我的问题是，如何将包含文件输入的表单代码放入表中，以便每次添加问题时，它都会附加问题编号和问题，但它也会为每一行附加文件输入？

【问题讨论】：

最好更改标记并将添加的问题表放在顶部。
我的意思是，最好将文件上传放在#question 表下。

标签： javascript jquery html

【解决方案1】：

您可以按照以前的方式进行操作。只要记住将这些行相应地更改为您在服务器端所期望的任何内容，例如文件输入的名称。

var $image = $("<td class='image'></td>"); 
var $fileImage = '<p id="f1_upload_form"><br/><label>File: <input name="fileImage" type="file" id="fileImage" /></label></p>';
$image.append($fileImage);
$tr.append($image);

现在您只需将上传按钮移动到表格的底部，仍然在包裹表格的表单内。

这里是a working jsfiddle。

【讨论】：

这确实将它附加到一个新行，但我想知道的是，当我点击行内的上传按钮时，它会通过表单标签将文件上传到upload.php，因为这就是我成功上传文件所需要做的。目前，文件输入被附加到一个新行中，但我不确定文件是否会成功上传，因为它没有可调用的表单标签。这有意义吗？
我更新了答案。只需将表格底部的上传按钮移动到<form> 内，当用户提交此表单时，每个输入都会发送到服务器。
澄清一下，如果我添加 3 个问题并为每个输入添加一个文件，如果我在第一行单击“上传”文件输入，那么会发生什么？只会上传第一行文件输入吗？
是的，只会上传一个文件，你的问题与js无关，与标记有关。
没关系，只要它在单击上传时一次上传一个文件，并且唯一上传的文件是文件输入中与上传按钮匹配的文件，然后就可以了。

【解决方案2】：

你可以获取File Input的值，然后添加到行中：

var fileinput = $("#fileinput").val();

【讨论】：

我真的需要将文件输入附加到每一行，这样如果用户在任何时候想要为其中一个问题上传文件，他们可以使用行内的文件输入。
所以最好在添加问题后添加文件上传输入。
上面亚历山大的做法是正确的。但我想知道每个文件输入如何以表单操作 upload.php 调用以成功上传文件。底部的表单执行此操作，但我怎样才能获得附加的文件输入以便能够使用表单操作 upload.php 上传文件？
明白了，你可以让添加问题提交这样做，问题将被添加，文件将被上传，用户可以在成功后添加另一个问题。
你知道这是如何实现的吗？