Question

我有一个应用程序，我想使用单个提交按钮提交多个表单。表格可能包含要上传的图片，因此，我一直在使用jQuery Form Plugin。

每个表单都需要发送到同一个服务器端脚本进行处理，但是，使用下面的代码，我可以看到服务器端脚本被调用了两次，但是提交的最后一个表单提供了相同的表单数据而不是每种形式的数据。

以下是html

<form id="form1" method="POST" enctype="multipart/form-data" >
    <input type="text" name="product_name" /><br />
    <select name="product_category">
        <option value="Long sleeved">Long Sleeved</option>
        <option value="Short Sleeved">Short Sleeved</option>
    </select><br />
    <input type="file" name="userfile[]" /><br />
    <input type="file" name="userfile[]" />
    <input type="file" name="userfile[]" /><br /><br />
</form>

<form id="form2"  method="POST" enctype="multipart/form-data" >
    <input type="text" name="product_name" /><br />
    <select name="product_category">
        <option value="Long sleeved">Long Sleeved</option>
        <option value="Short Sleeved">Short Sleeved</option>
    </select><br />
    <input type="file" name="userfile[]" />
    <input type="file" name="userfile[]" /><br /><br />
</form>

<a href="#" id="myButton">Submit</a>

和Javasript

$(document).ready(function() { 
    var options = {
            url: 'comment.php'
        }

    $('form').each(function(){
        $(this).ajaxForm(function() { 
            // optionally do stuff here after forms submitted
        });
    });

    $('#myButton').click(function() {
        $('form').each(function(){
            $(this).ajaxSubmit(options);
        });
        return false; 
    });
});

感谢您提供任何帮助/建议。

Answer 1

无法通过ajax上传文件，如果您想进行一些互动式上传，则必须使用HTML5或在不同的iframe中创建表单。

使用jQuery Form Plugin将多个表单提交到相同的服务器端脚本

1 个答案: