提交拆分为多个 div 的表单

Question

我想将我的表单拆分成多个 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>

Answer 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>

提交拆分为多个 div 的表单

Submit a form split over multipe divs

html

javascript

forms

form-submit