Question

我需要快速解释如何使用隐藏的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以及之后的所有浏览器上运行。

我很感激任何帮助。谢谢你的时间！

Answer 1

好吧，我用过类似的东西：

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

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

Answer 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);

试试这个

Jquery文件上传隐藏的IFrame

2 个答案: