Question

我正在尝试使用如下结构（当然这是一个＆＃34;裸骨＆＃34;例如，实际的表由PHP生成，包含多个文件，输入等等{ {1}}＆＃39; S）：

<td>

但是，除了<table>  <tr id='"row-'.$iterator.'"'> <form action="uploadHandler.php" method="post" enctype="multipart/form-data" id='"form-'.$iterator.'"' class="form-uploader"> <td><input type="file" class="main-img" name="main-img"/></td> <td><input type="text" name="main-img-title" /></td> <td><input type="submit" /></td> </form> </tr>  </table>内的<td>以及<tr>，<tr>，<caption> / {{{{{ {}}中的1}} / <thead>无效HTML。此外，我们将数据表（https://datatables.net/）添加到上述结构中，并且由于数据表删除/重建表元素，除了表元素之外的任何内容都会被删除。

方案吗

一种想法是移动<tbody>元素以避免这种复杂情况。我在这里不成功，因为出于功能原因，表单必须封装多个<tfoot>，但不能封装多个<table>。我无法打包<form>，因为它是无效的HTML，里面的内容 <td>。 <tr>不能在<tr>内，因为它必须包含多个<tr>，并且只要<form>关闭，<td>就是随后关闭。
使用JS：我想过在页面上有一个静态隐藏表单。在数据表中提交表单后，对表单的标准提交进行调解，并使用适当的<td>元素填充隐藏表单，并使用AJAX（和FormData对象）提交该隐藏表单。那个想法看起来像这样：
```
<td>
```
现在以某种方式找到了适当数量的输入（因为我已经测试了多个输入），但是Javascript对象mainImage看起来像这个<form>！我期望索引为0的<input>对象，我得{} ...空！
最后，我希望有一些jQuery Guru可以指出我正确的方向，如何适当地检索和移动所需的$(document).ready(function() { $(".form-uploader").submit(function(e) { e.preventDefault(); var identifier = $(this).attr("id"); //idVal represents the $iterator (in table above) //idVal is used to retrieve the appropriate row/inputs from the table of rows above var idVal = identifier.substring(identifier.lastIndexOf("-")+1, identifier.length); var mainImage = $("#row-"+idVal+" .main-img"); if(mainImage) { alert("mainImage found: " + JSON.stringify(mainImage)); //move inputs from Data Table row to static-hidden form //use FormData obj to post the static-hidden form } else { alert("id: "+idVal+" No main image found"); } //return true when testing is complete return false; } }或有助于解决结构中潜在问题的人。我的解决方案及其与HTML表格/数据表的兼容性！

Here和许多其他人都是类似的问题，但答案建议使用CSS来设置表格的样式。这些不是首选，因为数据表需要mainImage found: {"0":{},"length":1,...}，并且具有所需的样式（重新发明轮子没有意义）。我也看到了输入的form属性，但这在IE中不起作用。 Here建议用表格封装整个表格，但没有提供如何区分行的帮助。

我感谢第一个Stack Question的所有帮助，感谢您抽出时间和考虑！

Answer 1

This可以解释为什么我不能简单地抓住<input type="file">并将其移动到JS中的另一种形式。基本上，Javascript作为客户端的限制可以防止大多数文件数据被访问。安全第一的孩子！

最终，我相信声音解决方案“表中的输入行”从封装整个表的表单开始。从那里你必须相应地区分数据。这可能会因服务器端语言而异，我的是PHP，所以我使用了以下方法：

使用具有相同名称属性但其中包含唯一值属性的提交按钮。在PHP中使用echo $_POST['submit-button']之类的东西只会返回提交按钮按下的值，即使其他名称相同也是如此。
有了这个，我就可以为每个<input>中的每个<tr>使用唯一标识符，我可以用它来按行对所有输入进行分组。
要完成此操作，我会在处理帖子时在和表单中的所有输入中将此唯一标识符附加到我的名称属性。

一个简短的例子：

<强> uploadHandler.php

<?php
    if(isset($_POST['upload-button'])) {
        $identifier = $_POST['upload-button'];//this is the unique identifier for this row (see table below)
        //(All inputs would be contained in the all-encapsulating form, we only want ones from the row!)
        //Use $identifier to distinguish between <input>'s!
        $main_img = $_FILES['main-img'.$identifier];
        $main_img_title = $_POST['main-img-title'.$identifier];
    }
?>

<强> formPage.php

<form method="post" action="uploadHandler.php" enctype="multipart/form-data">
    <table>
    <!-- loop($iterator=0; $iterator < num_of_rows; $iterator++) -->
        <tr id='"row-'.$iterator.'"'>
            <td><input type="file" class="main-img" name="main-img'.$iterator.'" /></td>
            <td><input type="text" name="main-img-title'.$iterator.'" /></td>
            <td><input type="submit" name="upload-button" value="'.$iterator.'" /></td>
        </tr>
    <!-- end loop -->
    </table>
</form>

从表中上传包含按行

1 个答案: