4

为了向不太了解 PHP 的人证明我自己，我需要使用一些由可能不再被允许编程的人设计和构建的笨拙的系统。基本上，已经决定允许用户在实际完成注册之前为他们的个人资料上传图片。就在那儿，在注册表的中间，一个完全独立的表单（功能上，它必须看起来一样），带有一个文件上传字段、一个单独的提交按钮和一个图像显示区域。显然，客户在另一个网站上看到了 AJAX 图像上传，并决定，“这很酷，我们想要那个！” 没有真正知道表单是如何工作的，也没有考虑到为什么一个未注册的用户应该首先上传东西

我最初的想法是在其他地方创建一个不可见的表单，并在单击按钮时复制文件框的值，然后进行 AJAX 提交。这不起作用，因为 JavaScript 无法编辑文件框的值。可以理解。

第二次尝试是创建嵌套表单。通过一些黑客攻击，我确实设法让 FireFox 看到两个表单，但提交内部表单会提交外部表单。“未定义的行为”，我相信是这个词。有道理，你不应该嵌套表格。

所以 - 忽略这绝对没有意义的事实，并且真的应该告诉客户 - 有没有办法在页面上创建文件上传表单，可以通过 AJAX 提交，并且明显位于另一个形式？我希望避免仅仅在页面的其他地方创建表单，并使用可恶的 CSS hack 将其固定到位。

4

2 回答 2

1

我不知道这对您来说是否足够巧妙，但是iframe在表单中间嵌入一个并在该窗口中上传文件怎么样？它可能不够纯粹的邪恶，无法真正变得如此聪明和狡猾，但它可能会奏效。

我可以看到的唯一副作用是提交父级时，嵌入的iframe. 如果您足够小心并确保在iframe不使用文件上传时将其删除，我认为您应该没问题。

家长

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form submit="http://www.google.com/search" method="get">
    <div>
        <input type="text" name="q" value="[ Search Google Here ]"/>
    </div>
    <iframe src="http://jfcoder.com/test/embed.php" style="width: 200px; height: 200px;"></iframe>
    <div>
        <button type="submit">Submit this Page's Form</button>
    </div>
</form>
</body>
</html>

嵌入式

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<?php

if ($_GET['q']) {
    echo "<p><strong>GET SUBMITTED</strong></p>";
}

?>
<form submit="embed.php" method="get">
    <div>
        <input type="text" name="q" value="Type whatever"/>
        <button type="submit">Submit this Page's Form</button>
    </div>
</form>
</body>
</html>

http://jfcoder.com/test/parentform.php

于 2012-06-24T04:55:59.510 回答
0

编辑：

请阅读：嵌套的 html FORM 无法访问 - 多表单问题

该答案表明表单元素不能包含其他表单元素，因此即使它可以在浏览器上运行并不意味着您应该使用这种技术。尝试将其全部放入一种形式，如下所示：

<form action="register.php" method="POST" enctype="multipart/formdata">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="avitar" type="file" />
 <input name="image" type="submit" value="Upload" />
 <input name="register" type="submit" value="Register" />
</form>

或者更好的是，使用 jQuery/AJAX 在不离开页面的情况下上传 avitar。

原始答案：

您可以使用一些 javascript 解决此问题。这是一个快速的、未经测试的示例：

<head>
 <script>
  var submitted = false;

  function canSubmit() {
   if(submitted) return false;
   submitted = true;
   return true;
  }
 </script>
</head>
<body>
 <form action="register.php" method="POST" onsubmit="return canSubmit();">
  <input name="username" type="text" />
  <input name="password" type="password" />
  <form action="upload.php" method="POST" onsubmit="return canSubmit();" enctype="multipart/formdata">
   <input name="avatar" type="file" />
   <input type="submit" value="Upload" />
  </form>
  <input type="submit" value="Register" />
 </form>
</body>

另一种方法是只为表单提供相同的操作，并为提交按钮命名，这样您就可以知道哪个提交了。这仅适用于用户单击提交按钮并且在选择其中一个文本框时不只是按 Enter 键，但对于文件上传表单，用户必须单击提交按钮。

于 2012-06-24T03:52:31.283 回答