Question

我在form.php中设计了一个带有文件输入的表单。当我按下+输入按钮时，应该生成一个新的文件输入对象并将它们保存到我的mysql服务器。我的代码在这里，

form.php的

for i in data:
     ndata = i.split("::")
     check = list(ndata[0])
     if check[0] == '*':
        songs += ndata[0] + "\n"
     if check[0] == '#':
        break

form.js

<div id="enterReplyReferenceList">
    <div class="enterReplyRefInputContainer">
        <div class="enterReplyRefInput">
            <form action="submit.php" method="POST" enctype="multipart/form-data">
            <input type="hidden" value="<?php echo $userID; ?>" name="userID">
            <input type="submit" value="SEND"/>
            <input type="file" name="enterRefFile[]"  multiple class="enterRefFile" accept="application/pdf,image/jpeg, image/png, image/jpg"/>
            </form>
        </div>
    </div>
</div>

<button onclick="appendRef()">+input</button>

submit.php

function appendRef(){
var inputclass = document.getElementsByClassName('enterReplyRefInputContainer')[0];
var inputclassChild = document.createElement('div');

inputclassChild.innerHTML = inputclass.innerHTML;
var newClass = document.getElementById("enterReplyReferenceList").appendChild(inputclassChild);
newClass.className = "enterReplyRefInputContainer";

当我按下+输入按钮时，会生成一个与原件具有相同外观的新输入文件对象，我可以选择这些文件。但是，单击提交按钮后，只能将一个文件上传到我的mysql数据库。有人可以告诉我为什么新的文件输入无法上传？是否会发送新对象？

Answer 1

问题是您的输入按钮正在克隆整个div，其中包含表单，因此当您单击＆＃34;提交＆＃34;您正在上传一个包含一个文件元素的表单。这是一个更新版本（全部在一个文件中，您可以根据自己的喜好分开）：

<button onclick="appendRef()">+input</button><br><hr>
<form action="submit.php" method="POST" enctype="multipart/form-data">
<input type="hidden" value="<?php echo $userID; ?>" name="userID">
<div id="enterReplyReferenceList">
    <div class="enterReplyRefInputContainer">
        <div class="enterReplyRefInput">       
            <input type="file" name="enterRefFile[]"  multiple class="enterRefFile" accept="application/pdf,image/jpeg, image/png, image/jpg"/>
        </div>
    </div>
</div>
<hr>
<input type="submit" value="SEND"/>
</form>

<script>
function appendRef(){
    var inputclass = document.getElementsByClassName('enterReplyRefInputContainer')[0];
    var inputclassChild = document.createElement('div');

    inputclassChild.innerHTML = inputclass.innerHTML;
    var newClass = document.getElementById("enterReplyReferenceList").appendChild(inputclassChild);
    newClass.className = "enterReplyRefInputContainer";
}
</script>

按钮点击位于表单之外，因此您不会对其执行提交操作（除非您想使用阻止操作，例如jQuery preventDefault（），并且您只需要为整个表单提交一个。） / p>

使用表单动态添加输入文件对象

1 个答案: