Question

可能重复：
putting html inside an iframe (using javascript)

我正在使用下面的代码和我想要做的事情（我是jquery的新手）是提交这个表单，但是然后在uploadpic.php页面上输出正常的内容 - 出现在这个页面上形式是，在iframe中。我只是无法弄清楚如何做到这一点。我添加了Jquery表单插件 - http://www.malsup.com/jquery/form/ 所以我已经完成了代码并评论了它现在做了什么。但我不知道如何添加iframe交换。基本上uploadpic.php就是这样做的：

$add_one = $membership->add_photo($_POST['photo'], $_POST['caption']);

如果全部成功提交，或者如果失败，则回复“抱歉您的文件未上传”或“文件已成功上传。

我如何不必去新页面或诉诸刺激性的弹出窗口？我认为一个临时的iframe是个好主意 - 但根本不知道如何实现这样的事情。

<div id="uploadform">
            <form id = "uploadpicform" enctype="multipart/form-data" action="uploadpic.php" method="POST"> 
            <p>Photo: </p><input type="file" name="photo"><br />
            <p>Caption:</p> My <input type="text" name="caption"><br />
                   <input type="submit" class="large blue button" value="Add"> 
            </form>
            <script>
            // wait for the DOM to be loaded
            $(document).ready(function() {
                // bind 'myForm' and provide a simple callback function
                $('#uploadpicform').ajaxForm(function() {
                $("#hideuploadbutton").hide();
                $("#uploadbutton").show();
                $("#uploadform").hide();
                });
            });             
            </script>
        </div>

目前的做法是提交表单，不提及通知，隐藏上传按钮并显示一个打开的上传按钮以再次启动该过程。我认为必须有某种“添加iframe”或“从其他页面打印php变量”选项或其他东西。

我很感激任何帮助，非常感谢！

Answer 1

已加入 已添加用于填充iframe的代码

<强> HTML

<form id="uploadpicform">

    <p>Photo:</p>
    <input type="file" name="photo"><br />
    <p>Caption:</p>
    <input type="text" name="caption"><br />

</form>


<div id="uploadpicbutton" class="bluebutton">Upload</div>

<强> JQuery的

// **ADDED** Populate the iframe 
function iframeresults() {  

    var content = phpresults;
    var tFrame = document.getElementById("iframeid");
    var doc = tFrame.contentDocument;
    if (doc == undefined || doc == null)
        doc = tFrame.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();

}

//Submit Upload Ajax Call Function

function submit_upload() {

    $('#status').html('Uploading, Please Wait').fadeIn(500);

    $.ajax({
        type: "POST",
        url: "/uploadpic.php",
        cache: false,
        data: $('#uploadpicform').serialize(), //This adds the variable name and input values automatically
        dataType: "script", // Returns Javascript outputted from PHP page and Launches the Script
        success: function(){

        iframeresults();

    });        

}

// Bind the upload function to the button    
$('#uploadpicbutton').on('click', submit_upload);

<强> PHP

 //Use this echo in your PHP after your PHP Successful validation
 echo "var phpresults = 'Upload Succesful'; ";

 //Use this echo in your PHP after your PHP Failure validation
 echo "var phpresults = 'Upload Failed'; ";

Jquery表单插件在iframe中调用php echo

1 个答案: