提交拆分多个 div 的表单 [关闭]答案

【问题标题】：Submit a form split over multipe divs [closed]提交拆分多个 div 的表单 [关闭]
【发布时间】：2016-02-09 20:45:39
【问题描述】：

我想将我的表单拆分为多个divs，但是现在只上传了第一张图片。有人能看出哪里出错了吗？我尝试按照建议的here 将form="form" 添加到submit 字段，如下所示：

<input type="submit" value="Upload" id="submit" name="submit" class="submit-file" form="form"/>

但它给了我相同的结果（只有第一张图片被上传）。我必须进行哪些更改才能提交这两个文件？

代码

    <div >  
        <h1>IMAGE 1</h1>        
        <form id="form" action="update.php" enctype="multipart/form-data" method="post">                
            <fieldset id="f1">
                <input type="file" name="fileToUpload" id="fileToUpload"/>  
            </fieldset>    
        </div>


        <div >
            <h1>IMAGE 2</h1>
            <fieldset id="f2">
                <input type="file" name="fileToUpload2" id="fileToUpload2"/>        
            </fieldset >        
        </div>



        <div >
            <h1>UPLOAD BOTH IMAGES</h1>
            <fieldset id="f3">
                <input type="submit" value="Upload" id="submit" name="submit" class="submit-file" />
            </fieldset>
        </form>
    </div>

【问题讨论】：

那不是有效的 HTML。大多数浏览器会通过在第一个</div> 之前附加</form> 将其包含在有效的HTML 中。您可以拥有一个内部包含多个 div 的表单，但您需要正确关闭文档中的元素。
使用表单作为 div 的包装器。
另外，永远不要给表单控件命名或ID为“提交”，它会掩盖表单的提交方法，所以你不能调用它。
@RobG 感谢您的提示！

标签： javascript html forms form-submit

【解决方案1】：

如果你像这样改变你的标记应该没问题

<form id="form" action="update.php" enctype="multipart/form-data" method="post">
  <div>  

    <div>  
      <h1>IMAGE 1</h1>                                
      <fieldset id="f1">
        <input type="file" name="fileToUpload" id="fileToUpload"/>  
      </fieldset>    
    </div>

    <div>
      <h1>IMAGE 2</h1>
      <fieldset id="f2">
        <input type="file" name="fileToUpload2" id="fileToUpload2"/>        
      </fieldset >        
    </div>

    <div>
      <h1>UPLOAD BOTH IMAGES</h1>
      <fieldset id="f3">
        <input type="submit" value="Upload" id="submit" name="submit" class="submit-file" />
      </fieldset>
    </div>

  </div>
</form>

【讨论】：