表单不通过 iframe 输入

Question

我最近一直在开发一个具有表单的网络应用程序。但是，我遇到了障碍。在此表单中，有一个上传照片的iframe。提交后，照片会上传并让用户知道。此页面上的表单中还有一个隐藏的输入。在这个隐藏的输入中，存储了图像的 URL。这是我的脚本，应该拦截此输入的值并以以下形式传递：

window.onload = function() {
    document.getElementById("photoFrame").contentDocument.forms[0].onsubmit = function () {
        document.getElementById("entry_862192515").setAttribute("value", document.getElementById("photoFrame").contentDocument.forms[0].getElementById("photoUrl").value);
    }
}

这是我的 HTML：

<iframe width="100%" name="select_frame" src="/photo-upload.php" allowtransparency="true" frameborder="0" id="photoFrame"></iframe>

photo-upload.php 只是一个简单的上传图片的表单。现在这里是upload.php，从 POST 请求上传图像的 PHP 脚本：

<?php

// Cloudinary init
require 'Cloudinary.php';
require 'Uploader.php';
require 'Api.php';
\Cloudinary::config(array( 
  "cloud_name" => "(my name)", 
  "api_key" => "(my key)", 
  "api_secret" => "(my secret)"
));

// Uploads images to Cloudinary
$uploaded_file = \Cloudinary\Uploader::upload($_FILES["fileToUpload"]["tmp_name"]);

// Declares URL to variable
$url = $uploaded_file['secure_url'];

echo '<form><input type="hidden" id="photoUrl" value="'.$url.'" /></form>';
echo '<b style="color:green;">Success! Photo uploaded. Once you finish filling out the form, click the "Send" button.</b>';

?>

这个脚本有什么问题？运行控制台时，我在控制台中看不到任何错误，在 iframe 中，输入包含 URL 值。我究竟做错了什么？非常感谢。

Answer 1

<form>
  Hidden parent's input for photo URL:
  <input id="saveURL" />
  <iframe name="select_frame" src="iFrame.html" id="photoFrame"></iframe>
</form>

<script>

  // wait till parent loads so we don't trigger it during iFrame's first load
  window.onload = function() {

    var parentFormInput = document.getElementById('saveURL');
    var photoFrame = document.getElementById("photoFrame");

    // executes after the iFrame postback completes
    photoFrame.onload = function() {
      var innerDoc = this.contentDocument || this.contentWindow.document;
      var url = innerDoc.getElementById('photoUrl').value; // iframe input
      parentFormInput.value = url; // saves value to the iframe's parent
    }
  }

</script>

iFrame.html 包含表单：

<form>
  <input id="photoUrl" style="width:60%" readonly="readonly" value="http://somedomain.com/somefile.jpg" />
</form>

演示：http://plnkr.co/edit/auqk8tQrCYYEIFjJUmPC?p=preview

Answer 2

photo-upload.php 文件需要发布一个文件数据，以便可以从 $_FILES 中检索该文件数据。但是当 iframe 被加载时，文件数据怎么会被发布呢？我猜它会在php中抛出错误。