1

可能重复：
将 html 放入 iframe（使用 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 变量”选项之类的。

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

4

1 回答 1

0

已编辑 添加了用于填充 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'; ";
于 2012-11-03T03:07:46.873 回答