上传表单数据中的进度条

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建议为此目的使用现有的库。这些黑客有一种非常讨厌的倾向，特别是在涉及交叉浏览器的兼容性时。