在表单数据中上传进度条

Question

我尝试使用 PHP 和 jQuery 创建上传进度条。但是，当我将它带到表单数据时，我遇到了问题。代码类似这样：

<form method="post" action="upload.php" enctype="multipart/form-data" id="upload-form" target="upload-frame">

Suburb:<input type="text" name="txtSuburb" id="txtSuburb">

Picture:
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="button" name="submit" value="Upload!">
<iframe id="upload-frame" name="upload-frame">
</iframe>

<input type="submit" name="DataSubmit" value="Submit Data"/> 
</form>

如您所见，我有 2 个提交按钮。如果我保留这样的表单，则表单无法将数据提交到服务器。它只是将文件提交给 iFrame。如果我更改表单的操作和目标，那么上传进度功能将不起作用。

谁能帮我找到解决方案？

我希望用户可以点击上传按钮上传他们的文件。然后他们可以拿剩下的来填写表格。一切完成后，他们可以点击另一个提交数据按钮，将他们的数据（包括文件）提交到服务器。

Answer 1

确保表单中只有一个 input 类型为 submit 的元素。

如果您希望第一个按钮触发一些 Javascript，请使用常规输入元素甚至样式链接并将 Javascript 事件附加到它的 onclick 事件，然后阻止它的默认行为，例如通过返回false。 像这样，只有第二个按钮会实际提交您的表单，该表单应该执行您所描述的操作。

一般来说，我会支持@Treffynnon 的建议，即为此目的使用现有库。这些 hack 往往会变得非常糟糕，尤其是在跨浏览器兼容性方面。