Jquery 文件上传隐藏的 IFrame

Posted 2023-05-08

【中文标题】Jquery 文件上传隐藏的 IFrame

【英文标题】：Jquery File Upload Hidden IFrame

【发布时间】：2012-07-07 08:33:30

【问题描述】：

我需要快速解释一下如何使用隐藏的 iframe 上传 AJAX 样式的文件。这是与表单有关的 html 代码部分：

<div id = "file" class = "info">        
    <form id="file_upload_form" method="post" enctype="multipart/form-data" action='script/uploadScript'>
        <input name="file" id="file" size="27" type="file" /><br />
        <input id = "uploadSubmit" type="submit" name="action" value="Upload" />
        <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
    </form>
</div>

这是相关的 php：

public function uploadScript()

    $returnVals = array();

    if ($_FILES["file"]["error"] > 0)
        $returnVals['error'] =  "Error: " . $_FILES["file"]["error"] . "<br />";
    else
        if ($_FILES["file"]["type"] != "text/plain")
            $returnVals['error'] = "Badtype";
        else
            $returnVals['text'] =  file_get_contents($_FILES["file"]["tmp_name"]);
        
    

    echo json_encode($returnVals);

因此，本质上，PHP 获取文件并检查它是否为文本文件。然后，我想在 javascript 中访问返回的 json。这就是我感到困惑的地方......

$("#file_upload_form").submit(function() 
    $("#file_upload_form").target = "upload_target";
    $("#upload_target").onload = uploadDone();

);

理想情况下，当上传完成并加载 iframe 时，应该调用

function uploadDone() 
    alert($("#upload_target").contents().find("body").text());  

但是，那总是空白。本质上，returnVals 被放置在 iframe 主体中，但在警报之后，因此警报中没有任何内容。那么，有没有办法弥补这个小缺陷呢？

关于如何做到这一点有更好的解释吗？我整天都在用不同的示例代码等等来敲打它，但没有运气：/

我本质上希望能够提醒通过 php 代码返回的文本。顺便说一句，我这样做是因为我希望它能够在 IE7 和之后的所有浏览器上运行。

如果有任何帮助，我将不胜感激。感谢您的时间！

【问题讨论】：

iframe 到底是干什么用的？

顺便说一句，你在这一行有无效的 html：<input id = "uploadSubmit";这些字符之间不应该有空格。

Iframe 用于 Ajax 样式上传。本质上，我想使用 iframe 上传文件，这样就不必加载整个页面。

我认为你必须打印/回显 json_encode($returnVals);在 iframe 中（不返回）。

哦，哇，我不敢相信我已经回到了那里。哈哈，让我试试。

【参考方案1】：

嗯，我用过类似的东西：

$("#upload_target")[0].contentWindow.document.body.innerHTML

... 相反。但是一般的方法是类似的：检查这个字符串，如果它是空的，什么都不做（即立即返回）。否则继续分析这个 json。

【讨论】：

查询实际上工作正常：/第二次按下上传，警报显示第一次点击后应该有的内容。

谢谢，这绝对有效。我只需要删除整个提交调用，我认为这会导致问题，因为我没有在表单提交时完全触发。

【参考方案2】：

我使用此代码，并为我工作：

$(document).ready(function()
    $('form#myform').submit(function()
          $("#hiddenIframe").remove();    
          $('<iframe name="hiddenIframe" />').appendTo('body').attr('id': 'hiddenIframe');
          var Frame = $('#hiddenIframe');
          var newSrc = 'about:blank?nocache=' + Math.random(); //force new URL
          Frame.attr('src', newSrc); 
          var iframe = $('#hiddenIframe').load(function()
              var response = iframe.contents().find('body').html();
              var txt = $.parseJSON(response);
              $('#message').append(txt.message);
              if(txt.error == false)
                   $.ajax(
                       type: 'POST',
                       url: '?myurl',
                       dataType: 'json',
                       data: 
                           //some data
                       ,
                       success: function(data)
                           //some action
                        
                   );                                         
                         
         );                                             
    );
);

这会在每次提交时生成一个新的 iframe，我的 PHP 部分

$this->message['error'] = true;
$this->message['message'] = "Problem!";

echo/print json_encode($this->message);

试试这个

【讨论】：

这似乎并没有实际提交隐藏帧与上传。它创建一个新的 iframe 将其设置为 about:blank，然后加载它的内容？