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，PHP脚本从POST请求上传图像：

<?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中抛出错误。

表格不传递iframe输入

2 个答案: