如何知道将带有文件的表单提交到 iframe 是否失败答案

【问题标题】：How to know if submission of form, with files, to iframe fails如何知道将带有文件的表单提交到 iframe 是否失败
【发布时间】：2016-04-05 15:29:05
【问题描述】：

我使用iframe 构建了一个照片提交。问题是如何知道文件是否由于网络延迟或断开连接而无法提交。有这样的活动吗？或者只是如果它需要太长时间，如果有办法取消它，我就会取消它。我知道它什么时候完成，因为来自服务器的回复是一个 javascript 函数，它被加载为收到但如果我没有收到任何东西该怎么办！

<form action="iframe.php" target="my-iframe" method="post">

    <label for="text">Some text:</label>
    <input type="file" name="file" id="file">

    <input type="submit" value="post">

</form>

<iframe name="my-iframe" src="iframe.php"></iframe>

 <script>
     function img_upload_done(opn,img,photo_number){ // opn holds boolen if img uploaded succefully
           //do something
     }
 </script>

        <?php
        //getting the directory of the this file
           $destination_path = getcwd().DIRECTORY_SEPARATOR;
            $name = rand (100,1000);
           $result = 0;
           $filename=$_FILES['file']['name'];
           $ext = pathinfo($filename, PATHINFO_EXTENSION) ; 
         // setting up the directory of the file uploaded
           $target_path = $destination_path . $name .".". $ext;

         //making sure the file has been uploaded in the specified directory
           if(@move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
              $result = 1;
           }

           sleep(0);
        ?>
        <script language="javascript" type="text/javascript">
           window.top.window.img_upload_done(<?php echo $result.",\"".$name .".". $ext."\",".$_POST["photo-number"]; ?>);
        </script>







         <?php
         //This function separates the extension from the rest of the file name and returns it
         function findexts ($filename) {
            $filename = strtolower($filename) ;
             $exts = split("[/\\.]", $filename) ;
             $n = count($exts)-1;
             $exts = $exts[$n];
             return $exts;
         }
         //This applies the function to our file
         ?>

【问题讨论】：

您可能想确定一些 AJAX。但是，您还没有向我们展示您的 iframe.php，所以我们无能为力。
你想要的是一个 ajax javascript 函数。我建议您从熟悉 Javascript 开始，然后研究 ajax，因为它会提供您正在寻找的东西。

标签： javascript php jquery html iframe

【解决方案1】：

您可以使用 window.postMessage() 函数，向您的页面发送失败或成功消息。

它在您的主页中可能看起来像这样：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
  if (origin !== "http://www.your-url.com")
    return;

  // ...
}

在 iFrame 中，您可以在文件保存（或失败）后执行以下操作：

// where to send messages with postMessage
var target_origin = 'http://www.your-url.com';

parent.postMessage( {'success': 'true'}, target_origin );

【讨论】：