Question

我有一个添加表单元素的appendchild函数。在IE中，一切正常; process.php能够$_POST它。但是在Firefox中，它并没有发送数据。

这是我的代码。

<script type="text/javascript">
        var i=0;

        function addElement()
        {
            var ni = document.getElementById('org_div1');
            var numi = document.getElementById('theValue');
            var num = (document.getElementById('theValue').value -1)+ 2;
            numi.value = num;
            var newDiv = document.createElement('div');
            var divIdName = num;  newDiv.setAttribute('id',divIdName);

            newDiv.innerHTML = '<input type="text" name="work" /><input type="file"
class="fileupload" size="80" name="file' + (num) +'" onclick="addElement()"/> <a
  class="removelink" onclick=\'removeElement('+divIdName+')\'>Remove This File</
a>';

            // add the newly created element and it's content into the DOM
            ni.appendChild(newDiv);
        }

        function removeElement(divNum)
        {
            var d = document.getElementById('org_div1');
            var olddiv = document.getElementById(divNum);

            d.removeChild(olddiv);
        }

</script>

<td>
    <div class="file_input_wrapper">        
        <input type="hidden" value="1" id="theValue" />
        <div id='org_div1'>
            <input type="file" class="fileupload" name="file1" size="80" onclick="addElement()" />
        </div>
</td>

Answer 1

您可以使用PHP的字段名称数组功能来绕过您的字段名称。只需将字段命名为：

<input type="file" name="files[]" ... />
                              ^^--- array notation

并且PHP将在表单提交后将每个文件框作为$ _FILES数组中的单独成员处理。这使您免于跟踪存在多少个盒子的额外开销以及用于存储值的隐藏表单字段。

您可能需要重新考虑将文件元素的onclick添加为新文件输入。如果有人点击“浏览”按钮添加文件会怎样？他们会得到一个新的文件输入框，即使他们可能只想要一个。如果他们选择了错误的文件或稍后改变主意并再次点击浏览来更改文件选择，他们将获得另一个输入框。

考虑使用专用的“添加另一个框”按钮。

Answer 2

只想询问您的表单标记的位置？表标签之前或之后？我有类似的问题，我的表格标签在表格内。当我将表格标签放在桌子外面时，一切正常。

网站不再有效。这是一个有效的例子。我用过你的代码。我改变的只有两件事 <input type="text" name="work[]" />代替<input type="text" name="work" /> 而你错过了一个</div>结束div标签

这里是代码（在IE7，IE8，FF和谷歌浏览器上测试）

<?php
if (!empty($_POST['btnProsledi'])){
print_r($_POST);
echo "<br />";
print_r($_FILES);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
    var i=0;

    function addElement()
    {
        var ni = document.getElementById('org_div1');
        var numi = document.getElementById('theValue');
        var num = (document.getElementById('theValue').value -1)+ 2;
        numi.value = num;
        var newDiv = document.createElement('div');
        var divIdName = num;  newDiv.setAttribute('id',divIdName);

        newDiv.innerHTML = '<input type="text" name="work[]" /><input type="file"  class="fileupload" size="80" name="file' + (num) + '" onclick="addElement()"/> <a class="removelink" onclick=\'removeElement(' + divIdName + ')\'>Remove This File</a>';

        // add the newly created element and it's content into the DOM
        ni.appendChild(newDiv);
    }

    function removeElement(divNum)
    {
        var d = document.getElementById('org_div1');
        var olddiv = document.getElementById(divNum);

        d.removeChild(olddiv);
    }

</script>

</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
  <table>
<tr>
    <td>
    <input name="proba" type="text" id="proba" value="" />
    </td>
</tr>
<tr>
    <td>
<div class="file_input_wrapper">        
    <input type="hidden" value="1" id="theValue" />
    <div id='org_div1'>
        <input type="file" class="fileupload" name="file1" size="80" onclick="addElement()" />
    </div>
    </div>
</td>

</tr>
<tr>
    <td>
    <input name="btnProsledi" type="submit" id="btnProsledi" value="Submit" />
    </td>
</tr>
 </table>
 </form>
</body>
</html>

Answer 3

解决了问题...

基本上，我有这个......

<div>
<form>
</div>
</form>

并改为此..

<form>
<div>
</div>
</form>

似乎firefox不喜欢无效的HTML。

Appendchild没有在firefox中发布表单数据

3 个答案: