在jQuery中處理兩種形式時出現故障

Question

我想寫一個jQuery文件上傳程序， 使用這個插件http://aquantum-demo.appspot.com/file-upload 儘管這個插件真的很好，我遇到了一個問題。

這就是我所做的： 我設計了一個表單，圖形上傳部分使用上面列出的插件。 但是，這個插件還需要一個表單來激活PHP。

方案摘錄：

<form action="" method="get"> 
<--This layer probably needs other form information ex: name, telephone no....etc !--> 
   <form action="upload.php" method="POST" enctype="multipart/form-data"> 
        <div class="fileupload-buttonbar"> 
            <label class="fileinput-button"> 
                <span>Add files...</span> 
                <input type="file" name="files[]" multiple> 
            </label> 
            <button type="submit" class="start">Start upload</button> 
            <button type="reset" class="cancel">Cancel upload</button> 
            <button type="button" class="delete">Delete files</button> 
        </div> 
    </form> 
</form>  

我知道故障是由兩種形式造成的，如果是的話，有沒有什麼辦法解決？ 還是有更好的方式來提交表單？請幫幫我！感謝你們！

Answer 1

問題是你有嵌套窗體。 請勿使用嵌套表格。他們的行爲是不確定的。

從看你的代碼，目前還不清楚爲什麼你甚至需要第一種形式。它沒有任何行動，所以它似乎沒有做任何事情。是否有理由不能在現有表單中包含文件上傳控件？

如果你不能，你可以做兩件事情之一：

• 不提供對文件上傳表單的提交按鈕。向聯繫人表單添加提交處理程序。在這個處理程序中，您可以在文件上傳表單上顯式激發提交事件。此方法在前端工作較少，但您有兩個顯式提交，因此您可能需要後端代碼來確定哪些文件與哪些聯繫人相關聯。
• 在文件上傳表單中隱藏了與聯繫表單中的字段相匹配的字段。不要爲聯繫表單提供提交處理程序。向文件上傳表單添加提交處理程序。在此處理程序中，您可以將值從聯繫人表單複製到文件上傳表單上的隱藏字段。這種方法在前端有更多的工作，但是你一次性提交所有內容，所以你不必在後端做額外的工作來找出哪些文件與哪個聯繫人聯繫。總體而言，我認爲這種方法更容易。