Question

我正在制作一个上传页面，所以我需要一些帮助，所以我有两种不同的形式和两种不同的行动

表单是ajax图片上传（用户的个人资料图片）其工作正常行为是action='ajaximage.php'
表单是简单的用户信息详细信息，如Name，Bio等等，它也正常工作..它的作用是action="add.php"

怀疑/问题 在我的网站上，由于设计的原因，输入框没有按顺序排列。

<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
    <b>Tittle</b>
    <input type="text" name="name">
</form>

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
    <input type="file" title="Choose Image" name="photoimg" id="photoimg">
</form>

<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
    <b>Description</b>
    <textarea name="description" rows="1" cols="1"></textarea>

    <button input="submit">Save Changes</button>
</form>

Ajax图像上传程序正在运行，但在add.php的情况下，它仅适用于描述。我无法改变设计，所以如何才能解决？请帮助

Answer 1

每张表单都需要一个提交按钮。提交按钮只会提交它所在的表单。

Answer 2

@bwoebi对提交的内容是正确的，但如果您的安排无论如何都会让我感到非常惊讶。据我估算，你有3种形式。再次使用相同的名称是行不通的。单个表单需要是不同的 - 除非您想在提交时进行大量的javascript处理。再看一下修复布局以保持形式在一起。

刚刚看到你的评论。为什么单独的表单有单独的操作呢？为什么没有一个表单只有一个操作，只需要上传文件并添加详细信息（大概是数据库）？

您还可以在表单上添加不同的提交按钮，并为每个设置添加onclick属性，使表单的操作不同：

<input type="submit" name="sub1" value="Upload Image" onclick="document.myform.action='ajaximage.php';"> <input type="submit" name="sub2" value="Add User" onclick="document.myform.action='add.php';">

这意味着表单操作将根据使用的提交按钮进行更改。

Answer 3

要通过ajax上传图像，您不需要提交表单，这是通过ajax执行此操作的重点。您可以上传图像，然后提交文本输入的表单。

伪代码：

<form id="form" method="post" enctype="multipart/form-data" action='add.php'>
<input name="name"/>
<input name="profilePic" id="profilePic"/>
<input name="descrption"/>
</form>

然后你可以使用javascript（我更喜欢jQuery）通过ajax上传你的图像，指定#profilePic。

另外，你应该看一下：http://blueimp.github.io/jQuery-File-Upload/

尝试用2种不同的动作制作2种不同的形式

3 个答案: